feat: enhance date formatting and UI component styles

Innei · Innei · commit b96a02a41679 · 2025-05-20T16:55:16.000+08:00
- Updated `RelativeDay` component to utilize user-defined date formats.
- Refactored date formatting logic to improve performance with `useMemo`.
- Adjusted styles in `DateItem` and `ScrollArea` components for better visual consistency.
- Enhanced `SegmentGroup` background styling for improved UI clarity.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/layer/renderer/src/components/ui/datetime/index.tsx b/apps/desktop/layer/renderer/src/components/ui/datetime/index.tsx
@@ -7,18 +7,21 @@ import {
 } from "@follow/components/ui/tooltip/index.js"
 import { stopPropagation } from "@follow/utils/dom"
 import dayjs from "dayjs"
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 
 import { useGeneralSettingSelector } from "~/atoms/settings/general"
+import { useUISettingKey } from "~/atoms/settings/ui"
 
 export { RelativeTime } from "@follow/components/ui/datetime/index.js"
-const formatTemplateStringShort = "ll"
-
 export const RelativeDay = ({ date }: { date: Date }) => {
   const { t } = useTranslation("common")
   const language = useGeneralSettingSelector((s) => s.language)
 
+  const dateFormatValue = useUISettingKey("dateFormat")
+  const formatTemplateString = "lll"
+  const dateFormat = dateFormatValue === "default" ? formatTemplateString : dateFormatValue
+
   const formatDateString = useCallback(
     (date: Date) => {
       const now = new Date()
@@ -35,21 +38,10 @@ export const RelativeDay = ({ date }: { date: Date }) => {
       } else if (diffDays === 1) {
         return t("time.yesterday")
       } else {
-        let locale: Intl.Locale
-
-        try {
-          locale = new Intl.Locale(language.replace("_", "-"))
-        } catch {
-          locale = new Intl.Locale("en-US")
-        }
-        return date.toLocaleDateString(locale, {
-          weekday: "long",
-          month: "short",
-          day: "numeric",
-        })
+        return dayjs(date).format("ll")
       }
     },
-    [t, language],
+    [t],
   )
 
   const timerRef = useRef<any>(null)
@@ -70,7 +62,7 @@ export const RelativeDay = ({ date }: { date: Date }) => {
     }
   }, [date, formatDateString, language])
 
-  const formated = dayjs(date).format(formatTemplateStringShort)
+  const formated = useMemo(() => dayjs(date).format(dateFormat), [dateFormat, date])
 
   if (formated === dateString) {
     return <>{dateString}</>
diff --git a/apps/desktop/layer/renderer/src/modules/entry-column/components/DateItem.tsx b/apps/desktop/layer/renderer/src/modules/entry-column/components/DateItem.tsx
@@ -39,7 +39,7 @@ const useParseDate = (date: string) =>
     }
   }, [date])
 
-const dateItemclassName = tw`relative flex items-center text-sm lg:text-base gap-1 bg-background px-4 font-bold text-zinc-800 dark:text-neutral-400 h-7`
+const dateItemclassName = tw`relative flex items-center text-sm lg:text-base gap-1 bg-background px-4 font-bold text-text h-7`
 export const DateItem = memo(({ date, view, isSticky }: DateItemProps) => {
   if (view === FeedViewType.SocialMedia) {
     return <SocialMediaDateItem date={date} className={dateItemclassName} isSticky={isSticky} />
diff --git a/apps/desktop/layer/renderer/src/modules/entry-column/list.tsx b/apps/desktop/layer/renderer/src/modules/entry-column/list.tsx
@@ -242,7 +242,7 @@ export const EntryList: FC<EntryListProps> = memo(
                       "bg-background",
                       isActiveStickyItem
                         ? "sticky top-0 z-[1]"
-                        : "absolute left-0 top-0 w-full will-change-transform",
+                        : "absolute left-0 top-0 z-[1] w-full will-change-transform",
                     )}
                     style={
                       !isActiveStickyItem
diff --git a/packages/internal/components/src/ui/scroll-area/ScrollArea.tsx b/packages/internal/components/src/ui/scroll-area/ScrollArea.tsx
@@ -32,9 +32,8 @@ const Thumb = ({
     ref={forwardedRef}
     className={cn(
       "relative w-full flex-1 rounded-xl transition-colors duration-150",
-      "bg-gray-300 hover:bg-neutral-400/80",
-      "active:bg-neutral-400",
-      "dark:bg-neutral-500 hover:dark:bg-neutral-400/80 active:dark:bg-neutral-400",
+      "bg-fill-secondary hover:bg-fill",
+      "active:bg-fill-vibrant",
       "before:absolute before:-left-1/2 before:-top-1/2 before:h-full before:min-h-[44]",
       'before:w-full before:min-w-[44] before:-translate-x-full before:-translate-y-full before:content-[""]',
 
diff --git a/packages/internal/components/src/ui/segment/index.tsx b/packages/internal/components/src/ui/segment/index.tsx
@@ -35,7 +35,7 @@ export const SegmentGroup = (props: ComponentType<SegmentGroupProps>) => {
       <div
         role="tablist"
         className={cn(
-          "bg-fill-secondary text-text-secondary inline-flex h-9 items-center justify-center rounded-lg p-1 outline-none",
+          "bg-fill-tertiary text-text-secondary inline-flex h-9 items-center justify-center rounded-lg p-1 outline-none",
           className,
         )}
         tabIndex={0}

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ const useParseDate = (date: string) =>`
`39`	`39`	`}`
`40`	`40`	`}, [date])`
`41`	`41`
`42`		-const dateItemclassName = tw`relative flex items-center text-sm lg:text-base gap-1 bg-background px-4 font-bold text-zinc-800 dark:text-neutral-400 h-7`
	`42`	+const dateItemclassName = tw`relative flex items-center text-sm lg:text-base gap-1 bg-background px-4 font-bold text-text h-7`
`43`	`43`	`export const DateItem = memo(({ date, view, isSticky }: DateItemProps) => {`
`44`	`44`	`if (view === FeedViewType.SocialMedia) {`
`45`	`45`	`return <SocialMediaDateItem date={date} className={dateItemclassName} isSticky={isSticky} />`