From 5d2fe70b52a857c16ed7220fc36ecd5111f8cd4d Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Fri, 27 Dec 2024 23:52:15 +0800
Subject: [PATCH] feat: enhance SocialMediaItem component with dynamic title
 styling and action bar positioning

- Added state management for action reference and title reference in SocialMediaItem.
- Updated title rendering to dynamically adjust padding based on available space.
- Integrated EllipsisHorizontalTextWithTooltip for improved title display in FeedTitle component.
- Enhanced layout to ensure action bar is positioned correctly based on screen size.

This update improves the user experience by ensuring that titles are displayed clearly and actions are accessible without overlap.

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../entry-column/Items/social-media-item.tsx  | 24 +++++++++++++++----
 apps/renderer/src/modules/feed/feed-title.tsx | 10 ++++++--
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/apps/renderer/src/modules/entry-column/Items/social-media-item.tsx b/apps/renderer/src/modules/entry-column/Items/social-media-item.tsx
index bcee672f7d..f046ca8757 100644
--- a/apps/renderer/src/modules/entry-column/Items/social-media-item.tsx
+++ b/apps/renderer/src/modules/entry-column/Items/social-media-item.tsx
@@ -55,6 +55,8 @@ export const SocialMediaItem: EntryListItemFC = ({ entryId, entryPreview, transl
   }, [])
   const autoExpandLongSocialMedia = useGeneralSettingKey("autoExpandLongSocialMedia")
 
+  const [actionRef, setActionRef] = useState<HTMLDivElement | null>(null)
+  const titleRef = useRef<HTMLDivElement>(null)
   if (!entry || !feed) return null
 
   const content = entry.entries.content || entry.entries.description
@@ -79,12 +81,26 @@ export const SocialMediaItem: EntryListItemFC = ({ entryId, entryPreview, transl
       <FeedIcon fallback feed={feed} entry={entry.entries} size={32} className="mt-1" />
       <div ref={ref} className="ml-2 min-w-0 flex-1">
         <div className="-mt-0.5 flex-1 text-sm">
-          <div className="select-none space-x-1 leading-6">
-            <span className="inline-flex items-center gap-1 text-base font-semibold">
+          <div className="flex select-none flex-wrap space-x-1 leading-6" ref={titleRef}>
+            <span className="inline-flex min-w-0 items-center gap-1 text-base font-semibold">
               <FeedTitle
+                style={
+                  showAction && titleRef.current && actionRef && ref.current
+                    ? {
+                        paddingRight:
+                          [...titleRef.current.childNodes.values()].reduce(
+                            (acc, node) => acc + (node as HTMLElement).offsetWidth,
+                            0,
+                          ) +
+                            actionRef.offsetWidth >
+                          ref.current.offsetWidth
+                            ? actionRef.offsetWidth
+                            : 0,
+                      }
+                    : undefined
+                }
                 feed={feed}
                 title={entry.entries.author || feed.title}
-                titleClassName="max-w-[calc(100vw-8rem)]"
               />
               {parsed?.type === "x" && (
                 <i className="i-mgc-twitter-cute-fi size-3 text-[#4A99E9]" />
@@ -121,7 +137,7 @@ export const SocialMediaItem: EntryListItemFC = ({ entryId, entryPreview, transl
       </div>
 
       {showAction && !isMobile && (
-        <div className={"absolute right-1 top-1.5"}>
+        <div className={"absolute right-1 top-1.5"} ref={setActionRef}>
           <ActionBar entryId={entryId} />
         </div>
       )}
diff --git a/apps/renderer/src/modules/feed/feed-title.tsx b/apps/renderer/src/modules/feed/feed-title.tsx
index fb1479c005..3a9b068dd3 100644
--- a/apps/renderer/src/modules/feed/feed-title.tsx
+++ b/apps/renderer/src/modules/feed/feed-title.tsx
@@ -1,3 +1,4 @@
+import { EllipsisHorizontalTextWithTooltip } from "@follow/components/ui/typography/EllipsisWithTooltip.js"
 import type { FeedOrListRespModel } from "@follow/models/types"
 import { cn } from "@follow/utils/utils"
 
@@ -11,19 +12,24 @@ export const FeedTitle = ({
   className,
   titleClassName,
   title,
+  style,
 }: {
   feed: FeedOrListRespModel | null
   className?: string
   titleClassName?: string
   title?: string | null
+  style?: React.CSSProperties
 }) => {
   const hideExtraBadge = useUISettingKey("hideExtraBadge")
 
   if (!feed) return null
 
   return (
-    <div className={cn("flex select-none items-center truncate", className)}>
-      <div className={cn("truncate", titleClassName)}>{getPreferredTitle(feed) || title}</div>
+    <div className={cn("flex select-none items-center truncate", className)} style={style}>
+      <EllipsisHorizontalTextWithTooltip className={cn("truncate", titleClassName)}>
+        {getPreferredTitle(feed) || title}
+        {/* {title?.repeat(222)} */}
+      </EllipsisHorizontalTextWithTooltip>
       {!hideExtraBadge && (
         <>
           <FeedCertification feed={feed} />