new feature to pin favorites

Author: br4adam

package-lock.json

@@ -17,6 +17,7 @@
     "iconoir-react": "^6.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-wrap-balancer": "^1.0.0",
     "sonner": "^0.4.0",
     "tailwindcss-animated": "^1.0.1",
     "zustand": "^4.3.8"

package.json

@@ -1,5 +1,6 @@
 import { SyntheticEvent } from "react"
 import { useBookmarkStore } from "../stores/BookmarkStore"
+import { Pin } from "iconoir-react"
 import fallbackImage from "../assets/fallback.png"
 import BookmarkTags from "./BookmarkTags"
 import BookmarkDropdown from "./BookmarkDropdown"
@@ -21,8 +22,9 @@ const Bookmark = ({ bookmark }: Props) => {
 
   return (
     <CardSpotlight>
-      <div className="z-10 overflow-hidden rounded-md aspect-video bg-zinc-800">
-        <img className="object-cover w-full h-full m-auto" src={bookmark.image ? bookmark.image : fallbackImage} alt={bookmark.title} onError={addImageFallback} />
+      <div className="z-10 relative overflow-hidden rounded-md aspect-video bg-zinc-800">
+        <img className="object-cover w-full h-full m-auto" src={bookmark.image ? bookmark.image : fallbackImage} alt={bookmark.title} loading="lazy" onError={addImageFallback} />
+        { bookmark.pinned && <PinBadge /> }
       </div>
       <div>
         <div className="flex items-center gap-2">
@@ -38,4 +40,12 @@ const Bookmark = ({ bookmark }: Props) => {
   )
 }
 
+const PinBadge = () => {
+  return (
+    <div className="absolute top-2 right-2 w-6 h-6 flex items-center justify-center rounded-full bg-zinc-800">
+      <Pin width={16} />
+    </div>
+  )
+}
+
 export default Bookmark

src/components/Bookmark.tsx

@@ -1,20 +1,32 @@
-import { Fragment, useState } from "react"
+import { Fragment, useState, ReactNode } from "react"
 import { Menu, Transition } from "@headlessui/react"
-import { OpenInBrowser, Trash, Copy } from "iconoir-react"
+import { OpenInBrowser, Trash, Copy, Pin } from "iconoir-react"
 import { toast } from "sonner"
-import DeleteModal from "./DeleteModal"
+import { useBookmarkStore } from "../stores/BookmarkStore"
+import { useAuthStore } from "../stores/AuthStore"
 import useClipboard from "../hooks/useClipboard"
+import DeleteModal from "./DeleteModal"
 
 type Props = {
   bookmark: Bookmark
 }
 
 const BookmarkDropdown = ({ bookmark }: Props) => {
+  const { fetch: getBookmarks, update: updateBookmark } = useBookmarkStore(state => ({ fetch: state.fetch, update: state.update }))
   const { copy } = useClipboard()
+  const session = useAuthStore(state => state.session)
+  const userId = session?.user.id
   const [ isModalOpen, setIsModalOpen ] = useState<boolean>(false)
 
   const openInNewTab = (url: string) => window.open(url, "_blank")
 
+  const pinBookmark = async () => {
+    if (!userId) return
+    const response = await updateBookmark(bookmark.id, { ...bookmark, pinned: !bookmark.pinned })
+    if (!response.success) return toast.error(response.data)
+    getBookmarks(userId)
+  }
+
   const copyUrl = (url: string) => {
     copy(url)
     toast("URL copied to clipboard!", {style: { backgroundColor: "#18181b", borderColor: "#3f3f46" }})
@@ -30,27 +42,18 @@ const BookmarkDropdown = ({ bookmark }: Props) => {
         </Menu.Button>
         <Transition as={Fragment} enter="transition ease-out duration-100" enterFrom="transform opacity-0 scale-95" enterTo="transform opacity-100 scale-100" leave="transition ease-in duration-100" leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95">
           <Menu.Items className="absolute p-[1px] right-0 w-40 mt-2 origin-top-right bg-zinc-200 rounded-md text-sm z-20 shadow-xl focus:outline-non will-change-transform">
-          <Menu.Item>
-              {({ active }) => (
-                <button onClick={() => openInNewTab(bookmark.url)} className={`${active ? "bg-zinc-800 text-zinc-200" : "text-zinc-900"} flex gap-1 w-full items-center rounded-[5px] p-2`}>
-                  <OpenInBrowser width={16} strokeWidth={1.75} />Open in new tab
-                </button>
-              )}
-            </Menu.Item>
-            <Menu.Item>
-              {({ active }) => (
-                <button onClick={() => copyUrl(bookmark.url)} className={`${active ? "bg-zinc-800 text-zinc-200" : "text-zinc-900"} flex gap-1 w-full items-center rounded-[5px] p-2`}>
-                  <Copy width={16} strokeWidth={1.75} />Copy URL
-                </button>
-              )}
-            </Menu.Item>
-            <Menu.Item>
-              {({ active }) => (
-                <button onClick={() => setIsModalOpen(true)} className={`${active ? "bg-zinc-800 text-zinc-200" : "text-zinc-900"} flex gap-1 w-full items-center rounded-[5px] p-2`}>
-                  <Trash width={16} strokeWidth={1.75} />Delete
-                </button>
-              )}
-            </Menu.Item>
+            <MenuItem onClick={() => openInNewTab(bookmark.url)}>
+              <OpenInBrowser width={16} strokeWidth={1.75} />Open in new tab
+            </MenuItem>
+            <MenuItem onClick={() => copyUrl(bookmark.url)}>
+              <Copy width={16} strokeWidth={1.75} />Copy URL
+            </MenuItem>
+            <MenuItem onClick={pinBookmark}>
+              <Pin width={16} strokeWidth={1.75} />{ bookmark.pinned ? "Unpin" : "Pin to top" }
+            </MenuItem>
+            <MenuItem onClick={() => setIsModalOpen(true)}>
+              <Trash width={16} strokeWidth={1.75} />Delete
+            </MenuItem>
           </Menu.Items>
         </Transition>
       </Menu>
@@ -59,4 +62,21 @@ const BookmarkDropdown = ({ bookmark }: Props) => {
   )
 }
 
+type MenuItemProps = {
+  onClick: React.MouseEventHandler<HTMLButtonElement>
+  children: ReactNode
+}
+
+const MenuItem = ({ onClick, children }: MenuItemProps) => {
+  return (
+    <Menu.Item>
+    {({ active }) => (
+      <button onClick={onClick} className={`${active ? "bg-zinc-800 text-zinc-200" : "text-zinc-900"} flex gap-1 w-full items-center rounded-[5px] p-2`}>
+        {children}
+      </button>
+    )}
+  </Menu.Item>
+  )
+}
+
 export default BookmarkDropdown

src/components/BookmarkDropdown.tsx

@@ -19,11 +19,11 @@ const BookmarkTags = ({ bookmark }: Props) => {
   const formRef = useRef<HTMLFormElement>(null)
   useClickOutside(formRef, () => setEditable(false))
 
-  const handleUpdate = async (e: FormEvent<HTMLFormElement>) => {
+  const updateTags = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     if (!userId) return
     const tagList: string[] = newTags.replace(/\s/g, "").toLowerCase().split(",").filter(tag => tag)
-    const response = await updateBookmark(bookmark.id, tagList)
+    const response = await updateBookmark(bookmark.id, { ...bookmark, tags: tagList })
     if (!response.success) return toast.error(response.data)
     setEditable(false)
   }
@@ -32,10 +32,10 @@ const BookmarkTags = ({ bookmark }: Props) => {
     <div className="flex flex-wrap gap-2 mb-2 font-mono text-xs" onClick={() => setEditable(true)}>
     { !bookmark.tags.length && !editable && <p className="py-1 border-b border-transparent text-zinc-500">add tags...</p> }
     { bookmark && editable 
-      ? <form onSubmit={handleUpdate} ref={formRef} className="flex w-full gap-2">
+      ? <form onSubmit={updateTags} ref={formRef} className="flex w-full gap-2">
           <input type="text" value={newTags} onChange={(e) => setNewTags(e.target.value)} autoFocus className="max-w-full py-1 bg-transparent border-b border-zinc-600 focus:outline-none" style={{ width: `${newTags.length + 1}ch` }} />
           <button type="submit">
-            <Check className="transition-all cursor-pointer text-zinc-400 hover:text-zinc-200" width={16} strokeWidth={1.75} />
+            <Check className="transition-all cursor-pointer text-zinc-400 hover:text-zinc-200" width={16} />
           </button>
         </form>
       : bookmark.tags.map(tag => <span key={tag} className="px-2 py-1 truncate border-b border-transparent rounded-md bg-zinc-700/50 text-zinc-400">{tag}</span> )

src/components/BookmarkTags.tsx

@@ -1,7 +1,11 @@
+import Balancer from "react-wrap-balancer"
+
 const Headline = () => {
   return (
     <div className="flex flex-col gap-6 mt-20 mb-8 text-center text-transparent from-zinc-400 via-zinc-200 to-zinc-400 bg-gradient-to-r bg-clip-text animate-fade-down animate-duration-500">
-      <h1 className="max-w-md text-5xl font-bold md:max-w-2xl md:text-7xl">Say goodbye to messy bookmarks</h1>
+      <Balancer>
+        <h1 className="sm:text-6xl text-5xl font-bold md:text-7xl max-w-5xl">Say goodbye to messy bookmarks</h1>
+      </Balancer>
       <p className="text-lg break-words">Organize your online life effortlessly!</p>
     </div>
   )

src/components/Headline.tsx

@@ -9,7 +9,7 @@ type BookmarkState = {
   fetch: (userId: string) => Promise<StoreResponse>
   add: (url: string, savedBy: string) => Promise<StoreResponse>
   delete: (bookmarkId: number) => Promise<StoreResponse>
-  update: (bookmarkId: number, tags: string[]) => Promise<StoreResponse>
+  update: (bookmarkId: number, updatedBookmark: Bookmark) => Promise<StoreResponse>
   selectedTag: string
   setSelectedTag: (tag: string) => void
 }
@@ -24,7 +24,8 @@ export const useBookmarkStore = create<BookmarkState>(set => ({
         .from("bookmarks")
         .select("*")
         .eq("saved_by", userId)
-        .order("created_at", { ascending: false } )
+        .order("pinned", { ascending: false })
+        .order("created_at", { ascending: false })
         .returns<Bookmark[]>()
       if (error) throw new Error(`Error fetching bookmarks: ${error.message}`)
       set({ bookmarks: data })
@@ -77,17 +78,17 @@ export const useBookmarkStore = create<BookmarkState>(set => ({
       set({ loading: false })
     }
   },
-  update: async (bookmarkId, tags) => {
+  update: async (bookmarkId, updatedBookmark) => {
     try {
       const { data, error } = await supabase
         .from("bookmarks")
-        .update({ tags: tags })
+        .update(updatedBookmark)
         .eq("id", bookmarkId)
         .select()
         .returns<Bookmark[]>()
       if (error) throw new Error(`Error updating bookmark: ${error.message}`)
       set((state) => ({
-        bookmarks: state.bookmarks.map(bookmark => bookmark.id === bookmarkId ? { ...bookmark, tags: tags } : bookmark)
+        bookmarks: state.bookmarks.map(bookmark => bookmark.id === bookmarkId ? updatedBookmark : bookmark)
       }))
       return { data, success: true }
     } catch (error) {

src/stores/BookmarkStore.ts

@@ -8,6 +8,7 @@ type Bookmark = {
   created_at: string
   saved_by: string
   tags: string[]
+  pinned: boolean
 }
 
 type Metadata = {