fix: star icon place in grid template

Signed-off-by: Innei <[email protected]>
RSSNext · Aug 12, 2024 · dc3ca01 · dc3ca01
1 parent 9428368
commit dc3ca01
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 23 deletions.
diff --git a/src/renderer/src/components/ui/marquee/index.tsx b/src/renderer/src/components/ui/marquee/index.tsx
@@ -7,14 +7,19 @@ export const TitleMarquee = ({
   children,
   speed = 30,
   play,
+  className,
   ...rest
-}: PropsWithChildren & MarqueeProps) => {
+}: PropsWithChildren &
+MarqueeProps & {
+  className?: string
+}) => {
   const [hovered, setHovered] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
 
   const $wrapper = useRef<HTMLDivElement>(null)
   return (
     <div
+      className={className}
       ref={$wrapper}
       // className="[&_*]:scrollbar-none"
       onMouseEnter={useCallback(() => {
@@ -49,7 +54,13 @@ export const TitleMarquee = ({
         })
       }, [])}
     >
-      <Marquee className="overflow-hidden" play={hovered} ref={ref} speed={speed} {...rest}>
+      <Marquee
+        className="overflow-hidden"
+        play={hovered}
+        ref={ref}
+        speed={speed}
+        {...rest}
+      >
         {children}
       </Marquee>
     </div>

diff --git a/src/renderer/src/modules/entry-column/star-icon.tsx b/src/renderer/src/modules/entry-column/star-icon.tsx
@@ -1 +1,10 @@
-export const StarIcon = () => <i className="i-mgc-star-cute-fi absolute right-0 top-0 text-base text-orange-400" />
+import { cn } from "@renderer/lib/utils"
+
+export const StarIcon: Component = ({ className }) => (
+  <i
+    className={cn(
+      "i-mgc-star-cute-fi absolute right-0 top-0 text-base text-orange-400",
+      className,
+    )}
+  />
+)
diff --git a/src/renderer/src/modules/entry-column/templates/grid-item-template.tsx b/src/renderer/src/modules/entry-column/templates/grid-item-template.tsx
@@ -30,26 +30,30 @@ export function GridItem({
   return (
     <div className={cn("p-1.5", wrapperClassName)}>
       {children}
-      <div
-        className={cn(
-          "relative px-2 py-1 text-sm",
-          !asRead &&
-          "before:absolute before:-left-0.5 before:top-[14.5px] before:block before:size-1.5 before:rounded-full before:bg-theme-accent",
-        )}
-      >
-        <div
-          className={cn(
-            "relative mb-1 mt-1.5 truncate font-medium leading-none",
-            !!entry.collections && "pr-5",
-          )}
-        >
-          <TitleMarquee>
-            <EntryTranslation
-              source={entry.entries.title}
-              target={translation?.title}
-            />
-          </TitleMarquee>
-          {!!entry.collections && <StarIcon />}
+      <div className={cn("relative px-2 py-1 text-sm")}>
+        <div className="flex items-center">
+          <div
+            className={cn(
+              "mr-1 size-1.5 shrink-0 self-center rounded-full bg-theme-accent duration-200",
+              asRead && "mr-0 w-0",
+            )}
+          />
+          <div
+            className={cn(
+              "relative mb-1 mt-1.5 flex w-full items-center gap-1 truncate font-medium leading-none",
+              !!entry.collections && "pr-5",
+            )}
+          >
+            <TitleMarquee className="min-w-0 grow">
+              <EntryTranslation
+                source={entry.entries.title}
+                target={translation?.title}
+              />
+            </TitleMarquee>
+            {!!entry.collections && (
+              <StarIcon className="static shrink-0 self-end" />
+            )}
+          </div>
         </div>
         <div className="flex items-center gap-1 truncate text-[13px]">
           <FeedIcon