fix: border color in dark mode

Signed-off-by: Innei <i@innei.in>

src/renderer/src/components/ui/context-menu/context-menu.tsx

@@ -31,7 +31,7 @@ const ContextMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <i className="i-mgc-right-cute-re ml-auto size-3" />
+    <i className="i-mingcute-right-fill ml-auto size-3.5" />
   </ContextMenuPrimitive.SubTrigger>
 ))
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
@@ -44,7 +44,7 @@ const ContextMenuSubContent = React.forwardRef<
     <ContextMenuPrimitive.SubContent
       ref={ref}
       className={cn(
-        "z-[1001] min-w-32 overflow-hidden rounded-md border bg-theme-background p-1 text-theme-foreground/90 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-[1001] min-w-32 overflow-hidden rounded-md border bg-theme-modal-background-opaque p-1 text-theme-foreground/90 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:shadow-zinc-800/60",
         className,
       )}
       {...props}
@@ -61,7 +61,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-[999] min-w-32 overflow-hidden rounded-md border border-border bg-theme-background p-1 text-theme-foreground/90 shadow-lg",
+        "z-[999] min-w-32 overflow-hidden rounded-md border border-border bg-theme-modal-background-opaque p-1 text-theme-foreground/90 shadow-lg dark:shadow-zinc-800/60",
         "text-xs",
         className,
       )}
@@ -81,7 +81,7 @@ const ContextMenuItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-theme-item-hover focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "focus-within:outline-transparent data-[highlighted]:bg-theme-item-hover",
+      "focus-within:outline-transparent data-[highlighted]:bg-theme-item-hover dark:data-[highlighted]:bg-neutral-800",
       inset && "pl-8",
       className,
     )}
@@ -104,7 +104,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+    <span className="absolute left-2 flex items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
         <i className="i-mgc-check-filled size-4" />
       </ContextMenuPrimitive.ItemIndicator>

src/renderer/src/modules/entry-column/components/DateItem.tsx

@@ -2,17 +2,19 @@ import { RelativeDay } from "@renderer/components/ui/datetime"
 import { useScrollViewElement } from "@renderer/components/ui/scroll-area/hooks"
 import { FeedViewType } from "@renderer/lib/enum"
 import { cn } from "@renderer/lib/utils"
-import { memo, useLayoutEffect, useRef, useState } from "react"
+import { throttle } from "lodash-es"
+import { memo, useLayoutEffect, useMemo, useRef, useState } from "react"
 
 import { MarkAllButton } from "./mark-all-button"
 
-const useParseDate = (date: string) => {
+const useParseDate = (date: string) => useMemo(() => {
   const dateObj = new Date(date)
   return {
+    dateObj,
     startOfDay: new Date(dateObj.setHours(0, 0, 0, 0)).getTime(),
     endOfDay: new Date(dateObj.setHours(23, 59, 59, 999)).getTime(),
   }
-}
+}, [date])
 
 const useSticky = () => {
   const $scroller = useScrollViewElement()
@@ -22,15 +24,15 @@ const useSticky = () => {
   useLayoutEffect(() => {
     const $ = itemRef.current?.parentElement
     if (!$) return
-    const handler = (e: HTMLElementEventMap["scroll"]) => {
+    const handler = throttle((e: HTMLElementEventMap["scroll"]) => {
       if ((e.target as HTMLElement).scrollTop < 10) {
         setIsSticky(false)
         return
       }
       const isSticky = $.offsetTop <= 0
 
       setIsSticky(isSticky)
-    }
+    }, 16)
     $scroller?.addEventListener("scroll", handler)
     return () => {
       $scroller?.removeEventListener("scroll", handler)
@@ -59,8 +61,7 @@ const UniversalDateItem = ({
   date: string
   className?: string
 }) => {
-  const dateObj = new Date(date)
-  const { startOfDay, endOfDay } = useParseDate(date)
+  const { startOfDay, endOfDay, dateObj } = useParseDate(date)
 
   const { isSticky, itemRef } = useSticky()
   const RelativeElement = <RelativeDay date={dateObj} />
@@ -85,8 +86,7 @@ const SocialMediaDateItem = ({
   date: string
   className?: string
 }) => {
-  const dateObj = new Date(date)
-  const { startOfDay, endOfDay } = useParseDate(date)
+  const { startOfDay, endOfDay, dateObj } = useParseDate(date)
 
   const { isSticky, itemRef } = useSticky()
   const RelativeElement = <RelativeDay date={dateObj} />

src/renderer/src/modules/feed-column/list.tsx

@@ -144,7 +144,7 @@ export function FeedList({
               onClick={() => setExpansion(true)}
             />
           )}
-          <UnreadNumber unread={totalUnread} className="text-xs" />
+          <UnreadNumber unread={totalUnread} className="text-xs !text-inherit" />
         </div>
       </div>
       <ScrollArea.ScrollArea

src/renderer/src/styles/tailwind.css

@@ -44,7 +44,7 @@
     --accent-foreground: 60 9.1% 97.8%;
     --destructive: 0 72.2% 50.6%;
     --destructive-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
+    --border: 0 0% 22.1%;
     --input: 12 6.5% 15.1%;
     --ring: 20.5 90.2% 48.2%;
   }