feat: Add Bookmark Sorting Feature (#812)

* feat: add bookmark sorting by creation date

- Add sort order toggle in GlobalActions component
- Implement ascending/descending sort functionality
- Update translations for sorting feature in all languages
- Add sort order icons and dropdown menu
- Maintain sort preference in URL params

* feat: add bookmark sorting by creation date

- Add sort order toggle in GlobalActions component
- Implement ascending/descending sort functionality
- Update translations for sorting feature in all languages
- Add sort order icons and dropdown menu
- Maintain sort preference in URL params during session

Note: Sort order resets to default on page refresh, server-side persistence can be implemented in future enhancement

* feat: Add global sort by date feature with shared sort order state

- Implement global sort order functionality using a shared Zustand store (`useSortOrder` hook).
- Update `getBookmarks` and `searchBookmarks` endpoints to accept a `sortOrder` parameter.
- Refactor code to import `ZSortOrder` from shared types (`bookmarks.ts`), ensuring consistency across the codebase.
- Update components (`UpdatableBookmarksGrid`, `bookmark-search`) to use the shared `useSortOrder` hook.
- Remove unused `zSortBy` definition from `packages/shared/types/bookmarks.ts` to avoid confusion.
- Ensure consistent naming conventions by prefixing Zod inferred types with `Z`.
- Clean up code and address previous PR feedback comments.

* tiny fixes and fixing TS errors

---------

Co-authored-by: Mohamed Bassem <me@mbassem.com>

1 files changed, 9 insertions, 0 deletions

diff --git a/apps/web/lib/hooks/bookmark-search.ts b/apps/web/lib/hooks/bookmark-search.ts
index 386355f7..5ffec1b0 100644
--- a/apps/web/lib/hooks/bookmark-search.ts
+++ b/apps/web/lib/hooks/bookmark-search.ts
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useSortOrderStore } from "@/lib/store/useSortOrderStore";
 import { api } from "@/lib/trpc";
 import { keepPreviousData } from "@tanstack/react-query";
 
@@ -8,6 +9,7 @@ import { parseSearchQuery } from "@hoarder/shared/searchQueryParser";
 function useSearchQuery() {
   const searchParams = useSearchParams();
   const searchQuery = decodeURIComponent(searchParams.get("q") ?? "");
+
   const parsed = useMemo(() => parseSearchQuery(searchQuery), [searchQuery]);
   return { searchQuery, parsedSearchQuery: parsed };
 }
@@ -53,6 +55,7 @@ export function useDoBookmarkSearch() {
 
 export function useBookmarkSearch() {
   const { searchQuery } = useSearchQuery();
+  const sortOrder = useSortOrderStore((state) => state.sortOrder);
 
   const {
     data,
@@ -62,9 +65,11 @@ export function useBookmarkSearch() {
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
+    refetch,
   } = api.bookmarks.searchBookmarks.useInfiniteQuery(
     {
       text: searchQuery,
+      sortOrder,
     },
     {
       placeholderData: keepPreviousData,
@@ -74,6 +79,10 @@ export function useBookmarkSearch() {
     },
   );
 
+  useEffect(() => {
+    refetch();
+  }, [refetch, sortOrder]);
+
   if (error) {
     throw error;
   }