Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-21 02:42:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update bookmark group reorder modal

Browse source
This commit is contained in:
Pas 2025-08-03 14:08:58 -06:00
parent 501f0f78c1
commit 4d03a50481
5 changed files with 96 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

52
src/components/overlays/EditGroupOrderModal.tsx Normal file
View file

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

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

@ -6,16 +6,17 @@ import { useNavigate } from "react-router-dom";
import { Button } from "@/components/buttons/Button"; import { Button } from "@/components/buttons/Button";
import { EditButton } from "@/components/buttons/EditButton"; import { EditButton } from "@/components/buttons/EditButton";
import { EditButtonWithText } from "@/components/buttons/EditButtonWithText"; 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 { Icon, Icons } from "@/components/Icon";
import { SectionHeading } from "@/components/layout/SectionHeading"; import { SectionHeading } from "@/components/layout/SectionHeading";
import { WideContainer } from "@/components/layout/WideContainer"; import { WideContainer } from "@/components/layout/WideContainer";
import { MediaGrid } from "@/components/media/MediaGrid"; import { MediaGrid } from "@/components/media/MediaGrid";
import { WatchedMediaCard } from "@/components/media/WatchedMediaCard"; import { WatchedMediaCard } from "@/components/media/WatchedMediaCard";
import { DetailsModal } from "@/components/overlays/detailsModal/DetailsModal"; 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 { 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 { useBackendUrl } from "@/hooks/auth/useBackendUrl";
import { useRandomTranslation } from "@/hooks/useRandomTranslation"; import { useRandomTranslation } from "@/hooks/useRandomTranslation";
import { SubPageLayout } from "@/pages/layouts/SubPageLayout"; import { SubPageLayout } from "@/pages/layouts/SubPageLayout";
@ -419,33 +420,17 @@ export function AllBookmarks({ onShowDetails }: AllBookmarksProps) {
</div> </div>
{/* Edit Order Modal */} {/* Edit Order Modal */}
<Modal id={editOrderModal.id}> <EditGroupOrderModal
<ModalCard> id={editOrderModal.id}
<Heading2 className="!mt-0"> isShown={editOrderModal.isShown}
{t("home.bookmarks.groups.reorder.title")} items={sortableItems}
</Heading2> onCancel={handleCancelOrder}
<Paragraph> onSave={handleSaveOrderClick}
{t("home.bookmarks.groups.reorder.description")} onItemsChange={(newItems) => {
</Paragraph> const newOrder = newItems.map((item) => item.id);
<div className="mt-6"> setTempGroupOrder(newOrder);
<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>
{detailsData && <DetailsModal id="details" data={detailsData} />} {detailsData && <DetailsModal id="details" data={detailsData} />}
</WideContainer> </WideContainer>

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

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

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

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