fix(layout): unify top header height

- Renamed CSS class from `h-entry-header` to `h-top-header` for clarity and consistency.
- Introduced `h-top-header-with-border-b` for enhanced layout in `EntryListHeader`.
- Updated `RelativeTime` component to accept a `postfix` prop, allowing for more flexible date formatting.
- Adjusted instances of `RelativeTime` to utilize the new `postfix` prop for improved display.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatHeader.tsx

@@ -59,7 +59,7 @@ const ChatHeaderLayout = ({
       )}
       data-scrolled-beyond-threshold={isScrolledBeyondThresholdValue}
     >
-      <div className="h-entry-header">
+      <div className="h-top-header">
         {isFloating && (
           <div
             className="bg-background/70 backdrop-blur-background absolute inset-0"

apps/desktop/layer/renderer/src/modules/entry-column/Items/all-item.tsx

@@ -184,7 +184,7 @@ export function AllItem({ entryId, translation, currentFeedTitle }: UniversalIte
       </div>
 
       <div className="text-text-secondary ml-4 shrink-0 text-xs">
-        {!!displayTime && <RelativeTime date={displayTime} compact />}
+        {!!displayTime && <RelativeTime date={displayTime} postfix="" />}
       </div>
     </div>
   )

apps/desktop/layer/renderer/src/modules/entry-column/layouts/EntryListHeader.tsx

@@ -83,10 +83,11 @@ export const EntryListHeader: FC<{
   return (
     <div
       className={cn(
-        "flex h-12 w-full flex-col pr-4 pt-2.5",
+        "h-top-header-with-border-b flex w-full flex-col pr-4 pt-2.5",
         !feedColumnShow && "macos:mt-4 macos:pt-margin-macos-traffic-light-y",
         titleStyleBasedView[view],
         isPreview && "px-4",
+        view === FeedViewType.All && "border-b",
       )}
     >
       <div className={"flex w-full justify-between"}>

apps/desktop/layer/renderer/src/modules/entry-content/components/entry-header/AIEntryHeader.tsx

@@ -11,7 +11,7 @@ function EntryHeaderImpl({ entryId, className, compact }: EntryHeaderProps) {
   return (
     <EntryHeaderRoot entryId={entryId} className={className} compact={compact}>
       <div
-        className="bg-background h-entry-header relative z-10 flex w-full items-center justify-between gap-3 px-4"
+        className="bg-background h-top-header relative z-10 flex w-full items-center justify-between gap-3 px-4"
         data-at-top={isAtTop}
         data-hide-in-print
       >

apps/desktop/tailwind.config.ts

@@ -48,7 +48,8 @@ export default extendConfig({
         screen: "100svh",
         // button height 2rem (size-8) + sidebar padding top 0.625rem (pt-2.5) x 2
         // 2 + 0.625 * 2 = 3.25
-        "entry-header": "3.25rem",
+        "top-header": "3.25rem",
+        "top-header-with-border-b": "calc(3.25rem + 1px)",
       },
       colors: {
         sidebar: "hsl(var(--fo-sidebar) / <alpha-value>)",

packages/internal/components/src/ui/datetime/index.tsx

@@ -25,7 +25,7 @@ export const RelativeTime: FC<{
   date: string | Date
   displayAbsoluteTimeAfterDay?: number
   dateFormatTemplate?: string
-  compact?: boolean
+  postfix?: string
 }> = (props) => {
   const { displayAbsoluteTimeAfterDay = 29, dateFormatTemplate = formatTemplateString } = props
   const nextDateFormatTemplate =
@@ -60,17 +60,14 @@ export const RelativeTime: FC<{
   if (formated === relative) {
     return <>{relative}</>
   }
+
+  const resolvedPostfix = props.postfix ?? t("space") + t("words.ago")
   return (
     <Tooltip>
       {/* https://github.com/radix-ui/primitives/issues/2248#issuecomment-2147056904 */}
       <TooltipTrigger tabIndex={-1} onFocusCapture={stopPropagation}>
         {relative}
-        {!props.compact && (
-          <>
-            {t("space")}
-            {t("words.ago")}
-          </>
-        )}
+        {resolvedPostfix}
       </TooltipTrigger>
 
       <TooltipPortal>