diff options
Diffstat (limited to 'apps/web/components')
4 files changed, 74 insertions, 5 deletions
diff --git a/apps/web/components/dashboard/GlobalActions.tsx b/apps/web/components/dashboard/GlobalActions.tsx index 9c05dddf..ecbb70bf 100644 --- a/apps/web/components/dashboard/GlobalActions.tsx +++ b/apps/web/components/dashboard/GlobalActions.tsx @@ -2,11 +2,13 @@ import BulkBookmarksAction from "@/components/dashboard/BulkBookmarksAction"; import ChangeLayout from "@/components/dashboard/ChangeLayout"; +import SortOrderToggle from "@/components/dashboard/SortOrderToggle"; export default function GlobalActions() { return ( <div className="flex min-w-max flex-wrap overflow-hidden"> <ChangeLayout /> + <SortOrderToggle /> <BulkBookmarksAction /> </div> ); diff --git a/apps/web/components/dashboard/SortOrderToggle.tsx b/apps/web/components/dashboard/SortOrderToggle.tsx new file mode 100644 index 00000000..8c0f617d --- /dev/null +++ b/apps/web/components/dashboard/SortOrderToggle.tsx @@ -0,0 +1,56 @@ +import { ButtonWithTooltip } from "@/components/ui/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { useTranslation } from "@/lib/i18n/client"; +import { useSortOrderStore } from "@/lib/store/useSortOrderStore"; +import { Check, SortAsc, SortDesc } from "lucide-react"; + +export default function SortOrderToggle() { + const { t } = useTranslation(); + + const { sortOrder: currentSort, setSortOrder } = useSortOrderStore(); + + return ( + <DropdownMenu> + <DropdownMenuTrigger asChild> + <ButtonWithTooltip + tooltip={t("actions.sort.title")} + delayDuration={100} + variant="ghost" + > + {currentSort === "asc" ? ( + <SortAsc size={18} /> + ) : ( + <SortDesc size={18} /> + )} + </ButtonWithTooltip> + </DropdownMenuTrigger> + <DropdownMenuContent className="w-fit"> + <DropdownMenuItem + className="cursor-pointer justify-between" + onClick={() => setSortOrder("desc")} + > + <div className="flex items-center"> + <SortDesc size={16} className="mr-2" /> + <span>{t("actions.sort.newest_first")}</span> + </div> + {currentSort === "desc" && <Check className="ml-2 h-4 w-4" />} + </DropdownMenuItem> + <DropdownMenuItem + className="cursor-pointer justify-between" + onClick={() => setSortOrder("asc")} + > + <div className="flex items-center"> + <SortAsc size={16} className="mr-2" /> + <span>{t("actions.sort.oldest_first")}</span> + </div> + {currentSort === "asc" && <Check className="ml-2 h-4 w-4" />} + </DropdownMenuItem> + </DropdownMenuContent> + </DropdownMenu> + ); +} diff --git a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx index 5729e846..3f606346 100644 --- a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx +++ b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx @@ -13,7 +13,7 @@ export default async function Bookmarks({ showDivider, showEditorCard = false, }: { - query: ZGetBookmarksRequest; + query: Omit<ZGetBookmarksRequest, "sortOrder">; // Sort order is handled by the store header?: React.ReactNode; showDivider?: boolean; showEditorCard?: boolean; diff --git a/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx b/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx index d18eeb1b..e43d061b 100644 --- a/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx +++ b/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx @@ -1,6 +1,8 @@ "use client"; +import { useEffect } from "react"; import UploadDropzone from "@/components/dashboard/UploadDropzone"; +import { useSortOrderStore } from "@/lib/store/useSortOrderStore"; import { api } from "@/lib/trpc"; import type { @@ -16,14 +18,18 @@ export default function UpdatableBookmarksGrid({ bookmarks: initialBookmarks, showEditorCard = false, }: { - query: ZGetBookmarksRequest; + query: Omit<ZGetBookmarksRequest, "sortOrder">; // Sort order is handled by the store bookmarks: ZGetBookmarksResponse; showEditorCard?: boolean; itemsPerPage?: number; }) { - const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = + const sortOrder = useSortOrderStore((state) => state.sortOrder); + + const finalQuery = { ...query, sortOrder }; + + const { data, fetchNextPage, hasNextPage, isFetchingNextPage, refetch } = api.bookmarks.getBookmarks.useInfiniteQuery( - { ...query, useCursorV2: true }, + { ...finalQuery, useCursorV2: true }, { initialData: () => ({ pages: [initialBookmarks], @@ -31,9 +37,14 @@ export default function UpdatableBookmarksGrid({ }), initialCursor: null, getNextPageParam: (lastPage) => lastPage.nextCursor, + refetchOnMount: true, }, ); + useEffect(() => { + refetch(); + }, [sortOrder, refetch]); + const grid = ( <BookmarksGrid bookmarks={data!.pages.flatMap((b) => b.bookmarks)} @@ -45,7 +56,7 @@ export default function UpdatableBookmarksGrid({ ); return ( - <BookmarkGridContextProvider query={query}> + <BookmarkGridContextProvider query={finalQuery}> {showEditorCard ? <UploadDropzone>{grid}</UploadDropzone> : grid} </BookmarkGridContextProvider> ); |