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, 56 insertions, 0 deletions

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