chore: optimize useBreakpoint hook

src/components/MessageItem.tsx

@@ -28,7 +28,7 @@ const MessageItem: FC<MessageItemProps> = ({ data }) => {
   }
 
   return (
-    <div className="grid grid-cols-[auto_1fr] gap-x-2">
+    <div className="grid grid-cols-[auto_1fr] gap-x-2 px-4 first:pt-4 last:pb-4">
       <Avatar>
         <AvatarImage src={formatData.avatar} />
         <AvatarFallback>{formatData.username}</AvatarFallback>

src/components/MessageList.tsx

@@ -1,12 +1,15 @@
 import { type ReactElement, type FC } from 'react'
 
 import { type MessageItemProps } from './MessageItem'
+import { ScrollArea } from '@/components/ui/ScrollArea'
 
 export interface MessageListProps {
   children?: Array<ReactElement<MessageItemProps>>
 }
 const MessageList: FC<MessageListProps> = ({ children }) => {
-  return <div className="grid content-start overflow-y-auto p-4">{children}</div>
+  return <ScrollArea>{children}</ScrollArea>
 }
 
+MessageList.displayName = 'MessageList'
+
 export default MessageList

src/components/ui/ScrollArea.tsx

@@ -8,7 +8,9 @@ const ScrollArea = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root ref={ref} className={cn('relative overflow-hidden', className)} {...props}>
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full overscroll-none rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>

src/constants/index.ts

@@ -1,18 +1,18 @@
 // https://night-tailwindcss.vercel.app/docs/breakpoints
 export const BREAKPOINTS = {
-  sm: '640px',
+  sm: 640,
   // => @media (min-width: 640px) { ... }
 
-  md: '768px',
+  md: 768,
   // => @media (min-width: 768px) { ... }
 
-  lg: '1024px',
+  lg: 1024,
   // => @media (min-width: 1024px) { ... }
 
-  xl: '1280px',
+  xl: 1280,
   // => @media (min-width: 1280px) { ... }
 
-  '2xl': '1536px'
+  '2xl': 1536
   // => @media (min-width: 1536px) { ... }
 } as const
 

src/hooks/useBreakpoint.ts

@@ -1,18 +1,17 @@
-import { useMedia } from 'react-use'
+import { createBreakpoint } from 'react-use'
 import { BREAKPOINTS } from '@/constants'
 
+const _useBreakpoint = createBreakpoint(BREAKPOINTS)
+
 const useBreakpoint = () => {
-  const isSM = useMedia(`(min-width: ${BREAKPOINTS.sm})`)
-  const isMD = useMedia(`(min-width: ${BREAKPOINTS.md})`)
-  const isLG = useMedia(`(min-width: ${BREAKPOINTS.lg})`)
-  const isXL = useMedia(`(min-width: ${BREAKPOINTS.xl})`)
-  const is2XL = useMedia(`(min-width: ${BREAKPOINTS['2xl']})`)
+  const breakpoint = _useBreakpoint() as keyof typeof BREAKPOINTS
+
   return {
-    isSM,
-    isMD,
-    isLG,
-    isXL,
-    is2XL
+    isSM: breakpoint === 'sm',
+    isMD: breakpoint === 'md',
+    isLG: breakpoint === 'lg',
+    isXL: breakpoint === 'xl',
+    is2XL: breakpoint === '2xl'
   }
 }
 

src/views/Footer/index.tsx

@@ -36,7 +36,7 @@ const Footer: FC = () => {
   }
 
   return (
-    <div className="grid gap-y-2 p-4">
+    <div className="grid gap-y-2 px-4 pb-4">
       <MessageInput
         value={text}
         preview={isPreview}

src/views/Header/index.tsx

@@ -7,7 +7,7 @@ const Header: FC = () => {
   const websiteInfo = getWebSiteInfo()
 
   return (
-    <div className="shadow-xs grid h-12 grid-cols-[auto_1fr_auto] items-center bg-white px-4 backdrop-blur-lg 2xl:h-14">
+    <div className="shadow-xs z-10 grid h-12 grid-cols-[auto_1fr_auto] items-center bg-white px-4 backdrop-blur-lg 2xl:h-14">
       <img className="h-8 w-8 overflow-hidden rounded-full" src={websiteInfo.icon} />
       <HoverCard>
         <HoverCardTrigger asChild>