feat: enhance SocialMediaItem component with dynamic title styling an…

…d 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 <[email protected]>

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>
       )}

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} />