Revert "refactor: merge audio item layout (#2722)" (#2745)

This reverts commit e8e385105a.

apps/renderer/src/modules/entry-column/Items/article-item.tsx

@@ -9,7 +9,9 @@ import { FeedTitle } from "~/modules/feed/feed-title"
 import type { EntryItemStatelessProps, UniversalItemProps } from "../types"
 
 export function ArticleItem({ entryId, entryPreview, translation }: UniversalItemProps) {
-  return <ListItem entryId={entryId} entryPreview={entryPreview} translation={translation} />
+  return (
+    <ListItem entryId={entryId} entryPreview={entryPreview} translation={translation} withDetails />
+  )
 }
 
 export function ArticleItemStateLess({ entry, feed }: EntryItemStatelessProps) {

apps/renderer/src/modules/entry-column/Items/audio-item.tsx

@@ -8,7 +8,9 @@ import { FeedTitle } from "~/modules/feed/feed-title"
 import type { EntryItemStatelessProps, UniversalItemProps } from "../types"
 
 export function AudioItem({ entryId, entryPreview, translation }: UniversalItemProps) {
-  return <ListItem entryId={entryId} entryPreview={entryPreview} translation={translation} />
+  return (
+    <ListItem entryId={entryId} entryPreview={entryPreview} translation={translation} withAudio />
+  )
 }
 
 export function AudioItemStateLess({ entry, feed }: EntryItemStatelessProps) {

apps/renderer/src/modules/entry-column/templates/list-item-template.tsx

@@ -20,7 +20,16 @@ import { useInboxById } from "~/store/inbox"
 import { StarIcon } from "../star-icon"
 import type { UniversalItemProps } from "../types"
 
-export function ListItem({ entryId, entryPreview, translation }: UniversalItemProps) {
+export function ListItem({
+  entryId,
+  entryPreview,
+  translation,
+  withDetails,
+  withAudio,
+}: UniversalItemProps & {
+  withDetails?: boolean
+  withAudio?: boolean
+}) {
   const isMobile = useMobile()
   const entry = useEntry(entryId) || entryPreview
 
@@ -77,8 +86,8 @@ export function ListItem({ entryId, entryPreview, translation }: UniversalItemPr
 
   const related = feed || inbox
 
-  const hasAudio = !!entry.entries?.attachments?.[0]?.url
-  const hasMedia = !!entry.entries?.media?.[0]?.url
+  const hasAudio = entry.entries?.attachments?.[0]!.url
+  const hasMedia = entry.entries?.media?.[0]?.url
 
   const marginWidth = 8 * (isMobile ? 1.125 : 1)
   // calculate the max width to have a correct truncation
@@ -88,13 +97,13 @@ export function ListItem({ entryId, entryPreview, translation }: UniversalItemPr
   const mediaWidth = (settingWideMode ? 48 : 80) * (isMobile ? 1.125 : 1) + marginWidth
 
   let savedWidth = 0
-
-  savedWidth += feedIconWidth
-
-  if (hasAudio) {
+  if (!withAudio) {
+    savedWidth += feedIconWidth
+  }
+  if (withAudio && hasAudio) {
     savedWidth += audioCoverWidth
   }
-  if (hasMedia && !hasAudio) {
+  if (withDetails && hasMedia) {
     savedWidth += mediaWidth
   }
 
@@ -107,7 +116,7 @@ export function ListItem({ entryId, entryPreview, translation }: UniversalItemPr
         settingWideMode ? "py-3" : "py-4",
       )}
     >
-      <FeedIcon feed={related} fallback entry={entry.entries} />
+      {!withAudio && <FeedIcon feed={related} fallback entry={entry.entries} />}
       <div
         className={cn("-mt-0.5 flex-1 text-sm leading-tight", lineClamp.global)}
         style={{
@@ -135,7 +144,7 @@ export function ListItem({ entryId, entryPreview, translation }: UniversalItemPr
           className={cn(
             "relative my-0.5 break-words",
             !!entry.collections && "pr-5",
-            entry.entries.title ? "font-medium" : "text-[13px]",
+            entry.entries.title ? (withDetails || withAudio) && "font-medium" : "text-[13px]",
           )}
         >
           {entry.entries.title ? (
@@ -153,21 +162,25 @@ export function ListItem({ entryId, entryPreview, translation }: UniversalItemPr
           )}
           {!!entry.collections && <StarIcon className="absolute right-0 top-0" />}
         </div>
-        <div
-          className={cn(
-            "text-[13px]",
-            asRead ? "text-zinc-400 dark:text-neutral-500" : "text-zinc-500 dark:text-neutral-400",
-          )}
-        >
-          <EntryTranslation
-            className={cn("break-all", lineClamp.description)}
-            source={entry.entries.description}
-            target={translation?.description}
-          />
-        </div>
+        {withDetails && (
+          <div
+            className={cn(
+              "text-[13px]",
+              asRead
+                ? "text-zinc-400 dark:text-neutral-500"
+                : "text-zinc-500 dark:text-neutral-400",
+            )}
+          >
+            <EntryTranslation
+              className={cn("break-all", lineClamp.description)}
+              source={entry.entries.description}
+              target={translation?.description}
+            />
+          </div>
+        )}
       </div>
 
-      {hasAudio && (
+      {withAudio && !!hasAudio && (
         <AudioCover
           entryId={entryId}
           src={entry.entries!.attachments![0]!.url}
@@ -198,7 +211,7 @@ export function ListItem({ entryId, entryPreview, translation }: UniversalItemPr
         />
       )}
 
-      {!hasAudio && entry.entries.media?.[0] && (
+      {withDetails && entry.entries.media?.[0] && (
         <Media
           thumbnail
           src={entry.entries.media[0].url}