feat:- bookmarks

Author: riteshshukla04

components/Icons/index.tsx

@@ -35,6 +35,17 @@ export function Star({ width, height, style }: IconProps) {
   );
 }
 
+export function StarFilled({ width, height, style }: IconProps) {
+  return (
+    <Svg width={width ?? 20} height={height ?? 19} viewBox="0 0 20 19" style={style}>
+      <Path
+        d="M9.764.081l2.723 6.323 6.856.636-5.173 4.544 1.514 6.716-5.92-3.515-5.92 3.515 1.514-6.716L.186 7.04l6.855-.636L9.764.081z"
+        fill="currentColor"
+      />
+    </Svg>
+  );
+}
+
 export function Web({ width, height, style }: IconProps) {
   return (
     <Svg width={width ?? 18} height={height ?? 19} viewBox="0 0 18 19" style={style}>

components/Library/index.tsx

@@ -2,10 +2,11 @@ import { Platform, View } from 'react-native';
 
 import { A, HoverEffect, useLayout } from '~/common/styleguide';
 import CompatibilityTags from '~/components/CompatibilityTags';
-import { GitHub } from '~/components/Icons';
+import { GitHub, Star, StarFilled } from '~/components/Icons';
 import LibraryDescription from '~/components/Library/LibraryDescription';
 import UpdatedAtView from '~/components/Library/UpdateAtView';
 import Tooltip from '~/components/Tooltip';
+import { useBookmarks } from '~/context/BookmarksContext';
 import { type LibraryType } from '~/types';
 import tw from '~/util/tailwind';
 
@@ -31,8 +32,16 @@ export default function Library({
 }: Props) {
   const { github } = library;
   const { isSmallScreen, isBelowMaxWidth } = useLayout();
+  const { isBookmarked: checkIsBookmarked, toggleBookmark: toggleBookmarkGlobal } = useBookmarks();
 
   const libName = library.npmPkg ?? github.name;
+  const bookmarkId = library.npmPkg ?? library.github.fullName;
+  const isBookmarked = checkIsBookmarked(bookmarkId);
+
+  const handleToggleBookmark = () => {
+    void toggleBookmarkGlobal(bookmarkId);
+  };
+
   const hasSecondaryMetadata =
     github.license ||
     github.urls.homepage ||
@@ -43,13 +52,29 @@ export default function Library({
   return (
     <View
       style={[
-        tw`mb-4 border rounded-md flex-row overflow-hidden border-palette-gray2 dark:border-default`,
+        tw`mb-4 border rounded-md flex-row overflow-hidden border-palette-gray2 dark:border-default relative`,
         isSmallScreen && tw`flex-col`,
         skipMetadata && tw`w-[48.5%] mx-[0.75%] min-h-[206px]`,
         skipMetadata && (isSmallScreen || isBelowMaxWidth) && tw`w-[98.5%] max-w-[98.5%]`,
         skipSecondaryMetadata && tw`min-h-0`,
         library.unmaintained && tw`opacity-85`,
       ]}>
+      <Tooltip
+        sideOffset={8}
+        trigger={
+          <HoverEffect
+            onPress={handleToggleBookmark}
+            style={tw`absolute top-2 right-2 z-10 p-1.5 rounded-md bg-white dark:bg-palette-gray8 border border-palette-gray2 dark:border-palette-gray6`}
+            aria-label={isBookmarked ? 'Remove bookmark' : 'Bookmark library'}>
+            {isBookmarked ? (
+              <StarFilled width={16} height={16} style={tw`text-yellow-500`} />
+            ) : (
+              <Star width={16} height={16} style={tw`text-palette-gray4 dark:text-palette-gray5`} />
+            )}
+          </HoverEffect>
+        }>
+        {isBookmarked ? 'Remove from bookmarks' : 'Add to bookmarks'}
+      </Tooltip>
       <View style={[tw`pb-3.5 flex-1 p-4 pl-5`, isSmallScreen && tw`pt-2.5 pb-3 px-3.5`]}>
         {library.unmaintained && (
           <View

context/BookmarksContext.tsx

@@ -0,0 +1,68 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createContext, type PropsWithChildren, useContext, useEffect, useState } from 'react';
+
+const BOOKMARK_KEY = '@ReactNativeDirectory:BookmarkedLibraries';
+
+type BookmarksContextType = {
+  bookmarkedIds: Set<string>;
+  isBookmarked: (id: string) => boolean;
+  toggleBookmark: (id: string) => Promise<void>;
+  isLoading: boolean;
+};
+
+const BookmarksContext = createContext<BookmarksContextType | null>(null);
+
+export function BookmarksProvider({ children }: PropsWithChildren) {
+  const [bookmarkedIds, setBookmarkedIds] = useState<Set<string>>(new Set());
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    async function loadBookmarks() {
+      try {
+        const stored = await AsyncStorage.getItem(BOOKMARK_KEY);
+        if (stored) {
+          const parsed: string[] = JSON.parse(stored);
+          setBookmarkedIds(new Set(parsed));
+        }
+      } catch (error) {
+        console.error('Failed to load bookmarks:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    loadBookmarks();
+  }, []);
+
+  const isBookmarked = (id: string) => bookmarkedIds.has(id);
+
+  const toggleBookmark = async (id: string) => {
+    try {
+      const newSet = new Set(bookmarkedIds);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      
+      await AsyncStorage.setItem(BOOKMARK_KEY, JSON.stringify([...newSet]));
+      setBookmarkedIds(newSet);
+    } catch (error) {
+      console.error('Failed to toggle bookmark:', error);
+    }
+  };
+
+  return (
+    <BookmarksContext.Provider value={{ bookmarkedIds, isBookmarked, toggleBookmark, isLoading }}>
+      {children}
+    </BookmarksContext.Provider>
+  );
+}
+
+export function useBookmarks() {
+  const context = useContext(BookmarksContext);
+  if (!context) {
+    throw new Error('useBookmarks must be used within a BookmarksProvider');
+  }
+  return context;
+}

pages/_app.tsx

@@ -6,6 +6,7 @@ import Head from 'next/head';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import Footer from '~/components/Footer';
+import { BookmarksProvider } from '~/context/BookmarksContext';
 import CustomAppearanceProvider from '~/context/CustomAppearanceProvider';
 import tw from '~/util/tailwind';
 
@@ -23,18 +24,20 @@ Sentry.init({
 function App({ pageProps, Component }: AppProps) {
   return (
     <CustomAppearanceProvider>
-      <SafeAreaProvider>
-        <Head>
-          <meta
-            name="viewport"
-            content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,viewport-fit=cover"
-          />
-        </Head>
-        <main style={tw`flex flex-col flex-1`}>
-          <Component {...pageProps} />
-        </main>
-        <Footer />
-      </SafeAreaProvider>
+      <BookmarksProvider>
+        <SafeAreaProvider>
+          <Head>
+            <meta
+              name="viewport"
+              content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,viewport-fit=cover"
+            />
+          </Head>
+          <main style={tw`flex flex-col flex-1`}>
+            <Component {...pageProps} />
+          </main>
+          <Footer />
+        </SafeAreaProvider>
+      </BookmarksProvider>
     </CustomAppearanceProvider>
   );
 }