feat: Add Bookmark Sorting Feature #812

dakshpareek · 2025-01-03T09:13:56Z

This PR adds the ability to sort bookmarks by creation date in ascending or descending order.

Changes

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

Screenshots

Testing Done

Verified sort order works in both directions
Confirmed sort preference persists across page reloads
Tested with different layouts (grid, list, etc.)
Verified translations work correctly

Notes

Sort preference is maintained in URL params for better sharing and persistence
Default sort order is newest first (descending)
Note: Sort order resets to default on page refresh, server-side persistence can be implemented in future enhancement

- 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

- 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

kamtschatka · 2025-01-03T09:52:21Z

there is the new feature of smart lists/filtering based on queries. My assumption was, that sorting would be part of the query language in the future, since your solution will not work with pagination i assume?

dakshpareek · 2025-01-03T11:34:13Z

I do not have knowledge about smart lists/filtering. Is this upcoming feature?
My solution will work with pagination I assume.

MohamedBassem · 2025-01-03T11:56:51Z

Hey, thanks for the PR! My plan (still haven't given it a lot of thought) is to keep sorting and smart search separate (the way this PR introduces it) because sorting is needed even when smart searching is not used. Will hopefully be able to review this PR over the weekend.

MohamedBassem

Hey, thanks for the PR! Overall, the approach looks good to me. Left some comments, that we can merge the PR after they get addressed.

MohamedBassem · 2025-01-05T12:59:40Z

pnpm-lock.yaml

I think you might be using a different pnpm version which introduced a lot of changes to the lock file. Those will probably need to be reverted.

MohamedBassem · 2025-01-05T13:00:13Z

packages/shared/types/bookmarks.ts

@@ -161,6 +167,8 @@ export const zGetBookmarksRequestSchema = z.object({
  // The value is currently not being used, but keeping it so that client can still set it to true for older
  // servers.
  useCursorV2: z.boolean().optional(),
+  sortBy: zSortBy.optional().default("createdAt"),


Given that this is currently unused, should we just drop it for now to avoid confusion?

yes, removed it.

MohamedBassem · 2025-01-05T13:00:50Z

packages/shared/types/bookmarks.ts

@@ -12,6 +12,12 @@ export const enum BookmarkTypes {
  UNKNOWN = "unknown",
 }

+export const zSortOrder = z.enum(["asc", "desc"]);
+export type SortOrder = z.infer<typeof zSortOrder>;


Please follow the same style in the rest of the file. All zod inferred type start with the Z prefix.

MohamedBassem · 2025-01-05T13:01:03Z

packages/shared/types/bookmarks.ts

+export type SortOrder = z.infer<typeof zSortOrder>;
+
+export const zSortBy = z.enum(["createdAt"]);
+export type SortBy = z.infer<typeof zSortBy>;


Same comment about the prefix.

Removed this as well.

MohamedBassem · 2025-01-05T13:05:56Z

apps/web/components/dashboard/SortOrderToggle.tsx

+          className="cursor-pointer justify-between"
+          onClick={() => updateSort("desc")}
+        >
+          <span>{t("actions.sort.newest_first")}</span>


Let's include some lucide sort icons here to make it look nicer: https://lucide.dev/icons/?search=sort

Added icon here. Let me know if you think some other icon should be there.

MohamedBassem · 2025-01-05T13:10:51Z

packages/trpc/routers/bookmarks.ts

+          .orderBy(
+            input.sortOrder === "asc"
+              ? asc(bookmarks.createdAt)
+              : desc(bookmarks.createdAt),
+            desc(bookmarks.id),
+          ),


Given that this order button is global, we'll need to modify the searchBookmarks endpoint as well, and modify apps/web/lib/hooks/bookmark-search.ts to pass the sorting order to it as well.

Yes, search will also support sorting now.

apps/web/components/dashboard/SortOrderToggle.tsx

dakshpareek · 2025-01-05T13:34:30Z

Hi @MohamedBassem, thanks for reviewing PR.
I will look into these comments when I reach back home on Thursday after my vacation.

- 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.

dakshpareek · 2025-01-09T12:49:44Z

Hello @MohamedBassem,
I have adjusted sorting related code according to your suggestions. Please take a look when you have time and let me know what do you think.

Thanks

MohamedBassem · 2025-01-12T16:23:40Z

Thank you!

dakshpareek · 2025-01-12T17:28:22Z

Hey @MohamedBassem btw when is next release planned?
Just wanted to know when I can view latest changed on my hoarder account. 😄

MohamedBassem · 2025-01-12T17:32:27Z

@dakshpareek Given that the last release was last week, I think it'll be sometime until the next one. Maybe 3 weeks or so until we accumulate enough features for the release. There hasn't been a lot of changes since the release, so the nightly build should be stable if you want to switch to it today and have your feature available there today :D

dakshpareek added 2 commits January 3, 2025 13:39

MohamedBassem requested changes Jan 5, 2025

View reviewed changes

dakshpareek closed this Jan 8, 2025

dakshpareek force-pushed the feature/bookmark-sort-by-date branch from 839c1ed to 7daa87b Compare January 8, 2025 15:47

Merge branch 'main' into feature/bookmark-sort-by-date

91b9085

dakshpareek reopened this Jan 9, 2025

MohamedBassem added 2 commits January 12, 2025 15:40

Merge branch 'main' into feature/bookmark-sort-by-date

7be324b

tiny fixes and fixing TS errors

54d18ab

MohamedBassem merged commit b6293d1 into karakeep-app:main Jan 12, 2025
4 checks passed

Uh oh!

feat: Add Bookmark Sorting Feature #812

feat: Add Bookmark Sorting Feature #812

Uh oh!

Conversation

dakshpareek commented Jan 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Screenshots

Testing Done

Notes

Uh oh!

kamtschatka commented Jan 3, 2025

Uh oh!

dakshpareek commented Jan 3, 2025

Uh oh!

MohamedBassem commented Jan 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MohamedBassem left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dakshpareek commented Jan 5, 2025

Uh oh!

dakshpareek commented Jan 9, 2025

Uh oh!

Uh oh!

MohamedBassem commented Jan 12, 2025

Uh oh!

dakshpareek commented Jan 12, 2025

Uh oh!

MohamedBassem commented Jan 12, 2025

Uh oh!

Uh oh!

dakshpareek commented Jan 3, 2025 •

edited

Loading

MohamedBassem commented Jan 3, 2025 •

edited

Loading