small UI tweaks for bookmarks, simplify button styling

Author: Simek

components/BookmarkButton.tsx

@@ -4,35 +4,30 @@ import { HoverEffect } from '~/common/styleguide';
 import { Bookmark, BookmarkFilled } from '~/components/Icons';
 import Tooltip from '~/components/Tooltip';
 import { useBookmarks } from '~/context/BookmarksContext';
+import tw from '~/util/tailwind';
 
 type BookmarkButtonProps = {
   bookmarkId: string;
   style?: StyleProp<ViewStyle>;
   iconStyle?: StyleProp<ViewStyle>;
-  filledIconStyle?: StyleProp<ViewStyle>;
 };
 
-export default function BookmarkButton({
-  bookmarkId,
-  style,
-  iconStyle,
-  filledIconStyle,
-}: BookmarkButtonProps) {
-  const { isBookmarked: checkIsBookmarked, toggleBookmark: toggleBookmarkGlobal } = useBookmarks();
+export default function BookmarkButton({ bookmarkId, style, iconStyle }: BookmarkButtonProps) {
+  const { checkIsBookmarked, toggleBookmark } = useBookmarks();
   const isBookmarked = checkIsBookmarked(bookmarkId);
 
   function handleToggleBookmark() {
-    toggleBookmarkGlobal(bookmarkId);
+    toggleBookmark(bookmarkId);
   }
 
   return (
     <Tooltip
       trigger={
         <HoverEffect onPress={handleToggleBookmark} style={style}>
           {isBookmarked ? (
-            <BookmarkFilled style={filledIconStyle ?? iconStyle} />
+            <BookmarkFilled style={[tw`size-4 text-primary-dark dark:text-primary`, iconStyle]} />
           ) : (
-            <Bookmark style={iconStyle} />
+            <Bookmark style={[tw`size-4 text-palette-gray5 dark:text-palette-gray4`, iconStyle]} />
           )}
         </HoverEffect>
       }>

components/Filters/index.tsx

@@ -2,7 +2,6 @@ import { type StyleProp, View, type ViewStyle } from 'react-native';
 
 import FiltersSection from '~/components/Filters/FiltersSection';
 import { Tag } from '~/components/Tag';
-import { useBookmarks } from '~/context/BookmarksContext';
 import { type Query } from '~/types';
 import { getPageQuery } from '~/util/search';
 import tw from '~/util/tailwind';
@@ -27,8 +26,6 @@ type FiltersProps = {
 export function Filters({ query, style, basePath = '/packages' }: FiltersProps) {
   const pageQuery = getPageQuery(basePath, query);
   const isMainSearch = basePath === '/packages';
-  const { bookmarkedIds } = useBookmarks();
-  const hasBookmarks = bookmarkedIds.size > 0;
 
   return (
     <View style={[tw`flex-1 items-center bg-palette-gray1 py-2 dark:bg-very-dark`, style]}>
@@ -72,9 +69,7 @@ export function Filters({ query, style, basePath = '/packages' }: FiltersProps)
             basePath={basePath}
           />
         ))}
-        {hasBookmarks && (
-          <ToggleLink query={pageQuery} filterParam={FILTER_BOOKMARKS} basePath={basePath} />
-        )}
+        <ToggleLink query={pageQuery} filterParam={FILTER_BOOKMARKS} basePath={basePath} />
       </FiltersSection>
       <View style={tw`w-full max-w-layout flex-row flex-wrap content-start`}>
         <FiltersSection title="Compatibility">

components/Library/index.tsx

@@ -56,8 +56,6 @@ export default function Library({
       <BookmarkButton
         bookmarkId={bookmarkId}
         style={tw`absolute right-2 top-2 z-10 rounded border border-palette-gray2 p-1.5 dark:border-palette-gray6`}
-        iconStyle={tw`size-4 text-palette-gray4 dark:text-palette-gray5`}
-        filledIconStyle={tw`size-4 text-primary-dark dark:text-primary`}
       />
       <View style={[tw`flex-1 p-4 pb-3.5 pl-5`, isSmallScreen && tw`px-3.5 pb-3 pt-2.5`]}>
         {library.unmaintained && (

components/Package/PackageHeader.tsx

@@ -60,12 +60,7 @@ export default function PackageHeader({ library, registryData, rightSlot }: Prop
               />
             </A>
           </HoverEffect>
-          <BookmarkButton
-            bookmarkId={bookmarkId}
-            style={tw`size-5`}
-            iconStyle={tw`size-5 text-palette-gray5 dark:text-palette-gray4`}
-            filledIconStyle={tw`size-5 text-primary-dark dark:text-primary`}
-          />
+          <BookmarkButton bookmarkId={bookmarkId} style={tw`size-5`} iconStyle={tw`size-5`} />
         </View>
         {rightSlot}
       </View>

context/BookmarksContext.tsx

@@ -7,7 +7,7 @@ const COOKIE_MAX_AGE = TimeRange.YEAR;
 
 type BookmarksContextType = {
   bookmarkedIds: Set<string>;
-  isBookmarked: (id: string) => boolean;
+  checkIsBookmarked: (id: string) => boolean;
   toggleBookmark: (id: string) => void;
   isLoading: boolean;
 };
@@ -63,7 +63,7 @@ export function BookmarksProvider({ children }: PropsWithChildren) {
     setIsLoading(false);
   }, []);
 
-  function isBookmarked(id: string) {
+  function checkIsBookmarked(id: string) {
     return bookmarkedIds.has(id);
   }
 
@@ -80,7 +80,8 @@ export function BookmarksProvider({ children }: PropsWithChildren) {
   }
 
   return (
-    <BookmarksContext.Provider value={{ bookmarkedIds, isBookmarked, toggleBookmark, isLoading }}>
+    <BookmarksContext.Provider
+      value={{ bookmarkedIds, checkIsBookmarked, toggleBookmark, isLoading }}>
       {children}
     </BookmarksContext.Provider>
   );