chore: miscellaneous updates (#70)

src/app/layout.js

@@ -90,6 +90,5 @@ export const viewport = {
   themeColor: 'white',
   colorScheme: 'only light',
   width: 'device-width',
-  initialScale: 1,
-  maximumScale: 1
+  initialScale: 1
 }

src/app/workspace/page.js

@@ -16,7 +16,7 @@ export default async function Workspace() {
       <div className="content-wrapper">
         <div className="content">
           <PageTitle title="Workspace" />
-          <div className="-mx-6 flex snap-x snap-mandatory gap-6 overflow-x-scroll pb-4 mb-4 md:mx-0 md:grid md:snap-none md:grid-cols-2 md:overflow-x-auto md:pb-0">
+          <div className="-mx-6 mb-4 flex snap-x snap-mandatory gap-6 overflow-x-scroll pb-4 md:mx-0 md:grid md:snap-none md:grid-cols-2 md:overflow-x-auto md:pb-0">
             <EmptyPlaceholder />
             <Image
               src="/assets/workspace-1.webp"
@@ -25,6 +25,7 @@ export default async function Workspace() {
               width={756}
               height={1008}
               loading="eager"
+              priority
             />
             <Image
               src="/assets/workspace-2.webp"
@@ -33,6 +34,7 @@ export default async function Workspace() {
               width={756}
               height={1008}
               loading="eager"
+              priority
             />
             <EmptyPlaceholder />
           </div>

src/components/bookmark-card.js

@@ -3,7 +3,7 @@ import { Link2Icon } from 'lucide-react'
 import { TweetCard } from '@/components/tweet-card/tweet-card'
 import { TWEETS_COLLECTION_ID } from '@/lib/constants'
 
-export const BookmarkCard = ({ bookmark }) => {
+export const BookmarkCard = ({ bookmark, order }) => {
   if (bookmark.link && bookmark.collectionId === TWEETS_COLLECTION_ID) {
     const match = bookmark.link.match(/\/status\/(\d+)/) ?? []
     const tweetId = match[1]
@@ -17,24 +17,25 @@ export const BookmarkCard = ({ bookmark }) => {
       href={bookmark.link}
       target="_blank"
       rel="noopener noreferrer"
+      data-bookmark-order={order}
     >
       <span className="aspect-[1200/630] overflow-hidden rounded-lg">
         <img
-          src={bookmark.cover}
+          src={bookmark.cover || '/assets/fallback.webp'}
           alt={bookmark.title}
           width={1200}
           height={630}
-          loading="lazy"
-          className="aspect-[1200/630] animate-reveal rounded-lg border bg-[url('/assets/fallback.webp')] bg-cover bg-center bg-no-repeat object-cover"
+          loading={order < 2 ? 'eager' : 'lazy'}
+          className="aspect-[1200/630] animate-reveal rounded-lg border bg-cover bg-center bg-no-repeat object-cover"
           onError={(e) => {
             e.target.onerror = null
             e.target.src = '/assets/fallback.webp'
           }}
         />
       </span>
       <div className="flex flex-col gap-1">
-        <h3>{bookmark.title}</h3>
-        <span className="line-clamp-5 inline-flex items-center gap-1 text-sm text-gray-500">
+        <h2 className="line-clamp-4 text-lg leading-snug">{bookmark.title}</h2>
+        <span className="line-clamp-4 inline-flex items-center gap-1 text-sm text-gray-500">
           <Link2Icon size={16} />
           {bookmark.domain}
         </span>

src/components/bookmark-list.jsx

@@ -60,7 +60,7 @@ export const BookmarkList = ({ initialData, id }) => {
               key={`bookmark_${bookmarkIndex}`}
               className={cn('grid gap-4', isTweetCollection ? 'h-fit' : 'place-content-start')}
             >
-              <BookmarkCard key={bookmark._id} bookmark={bookmark} />
+              <BookmarkCard key={bookmark._id} bookmark={bookmark} order={bookmarkIndex} />
             </div>
           )
         })}
@@ -72,8 +72,8 @@ export const BookmarkList = ({ initialData, id }) => {
               key={`chunk_${chunkIndex}`}
               className={cn('grid gap-4', isTweetCollection ? 'h-fit' : 'place-content-start')}
             >
-              {chunk.map((bookmark) => {
-                return <BookmarkCard key={bookmark._id} bookmark={bookmark} />
+              {chunk.map((bookmark, bookmarkIndex) => {
+                return <BookmarkCard key={bookmark._id} bookmark={bookmark} order={bookmarkIndex} />
               })}
             </div>
           )

src/components/drawer.js

@@ -15,9 +15,13 @@ export function MobileDrawer() {
       <Drawer.Portal>
         <Drawer.Overlay className="fixed inset-0 bg-black/40" />
         <Drawer.Content className="fixed bottom-0 left-0 right-0 mt-24 flex h-[80%] flex-col rounded-t-lg bg-gray-100">
-          <div className="flex-1 overflow-y-auto rounded-t-[10px] bg-white p-4">
-            <div className="mx-auto mb-8 h-1.5 w-12 shrink-0 rounded-full bg-zinc-300" />
-            <MenuContent />
+          <div className="flex-1 overflow-y-auto rounded-t-lg bg-white">
+            <div className="pointer-events-none sticky inset-x-0 top-0 flex h-10 items-center justify-center overflow-hidden bg-white">
+              <div className="h-1.5 w-12 shrink-0 rounded-full bg-gray-300" />
+            </div>
+            <div className="p-4">
+              <MenuContent />
+            </div>
           </div>
         </Drawer.Content>
       </Drawer.Portal>

src/components/side-menu.js

@@ -1,5 +1,5 @@
 'use client'
-import { useRouter } from 'next/navigation'
+import { useRouter, usePathname } from 'next/navigation'
 import Link from 'next/link'
 import { RadioIcon } from 'lucide-react'
 
@@ -8,26 +8,24 @@ import { Button } from '@/components/ui/button.jsx'
 import { useKeyPress } from '@/hooks/useKeyPress'
 import { cn } from '@/lib/utils'
 
+const keyCodePathnameMapping = {
+  Digit1: '/',
+  Digit2: '/writing',
+  Digit3: '/journey',
+  Digit4: '/stack',
+  Digit5: '/workspace',
+  Digit6: '/bookmarks'
+}
+
 export const SideMenu = ({ children, title, href, isInner }) => {
   const router = useRouter()
-  useKeyPress(onKeyPress, ['Digit1', 'Digit2', 'Digit3', 'Digit4', 'Digit5', 'Digit6'])
+  const pathname = usePathname()
+  useKeyPress(onKeyPress, Object.keys(keyCodePathnameMapping))
 
   function onKeyPress(event) {
-    event.preventDefault()
-
-    if (event.code === 'Digit1') {
-      router.push('/')
-    } else if (event.code === 'Digit2') {
-      router.push('/writing')
-    } else if (event.code === 'Digit3') {
-      router.push('/journey')
-    } else if (event.code === 'Digit4') {
-      router.push('/stack')
-    } else if (event.code === 'Digit5') {
-      router.push('/workspace')
-    } else if (event.code === 'Digit6') {
-      router.push('/bookmarks')
-    }
+    const key = event.code
+    const targetPathname = keyCodePathnameMapping[key]
+    if (targetPathname && targetPathname !== pathname) router.push(targetPathname)
   }
 
   const isWritingHref = href === '/writing'

src/hooks/useKeyPress.js

@@ -8,7 +8,7 @@ export function useKeyPress(callback, keyCodes) {
       }
     }
 
-    window.addEventListener('keydown', handler)
+    window.addEventListener('keydown', handler, { passive: true })
     return () => {
       window.removeEventListener('keydown', handler)
     }