refactor(ListItemName): convert styled component to Tailwind CSS function component

- Convert ListItemName from styled-components to Tailwind CSS function component
- Use inline styles for webkit-specific line clamping properties
- Remove complex animations from component definition (can be added via CSS classes)
- Use HTMLDivElement props interface for proper TypeScript typing

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/renderer/src/pages/home/Tabs/components/shared.tsx

@@ -36,53 +36,27 @@ export const ListItemNameContainer = ({ children, className, ...props }: HTMLAtt
   )
 }
 
-export const ListItemName = styled.div`
+export const ListItemName = ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => {
-  display: -webkit-box;
+  return (
-  -webkit-line-clamp: 1;
+    <div
-  -webkit-box-orient: vertical;
+      className={cn(
-  overflow: hidden;
+        'overflow-hidden text-sm relative',
-  font-size: 13px;
+        'will-change-[background-position,width]',
-  position: relative;
+        className
-  will-change: background-position, width;
+      )}
-
+      style={{
-  --color-shimmer-mid: var(--color-text-1);
+        display: '-webkit-box',
-  --color-shimmer-end: color-mix(in srgb, var(--color-text-1) 25%, transparent);
+        WebkitLineClamp: 1,
-
+        WebkitBoxOrient: 'vertical',
-  &.shimmer {
+        WebkitBoxFlex: 1,
-    background: linear-gradient(to left, var(--color-shimmer-end), var(--color-shimmer-mid), var(--color-shimmer-end));
+        ...props.style,
-    background-size: 200% 100%;
+      }}
-    background-clip: text;
+      {...props}
-    color: transparent;
+    >
-    animation: shimmer 3s linear infinite;
+      {children}
-  }
+    </div>
-
+  )
-  &.typing {
+}
-    display: block;
-    -webkit-line-clamp: unset;
-    -webkit-box-orient: unset;
-    white-space: nowrap;
-    overflow: hidden;
-    animation: typewriter 0.5s steps(40, end);
-  }
-
-  @keyframes shimmer {
-    0% {
-      background-position: 200% 0;
-    }
-    100% {
-      background-position: -200% 0;
-    }
-  }
-
-  @keyframes typewriter {
-    from {
-      width: 0;
-    }
-    to {
-      width: 100%;
-    }
-  }
-`
 
 export const ListItemEditInput = styled.input`
   background: var(--color-background);