file ordering

src/tabs/Search/ResultCard.tsx

@@ -0,0 +1,83 @@
+import { Show } from "solid-js";
+import type { SearchResult } from "@/types/source";
+import { SourceBadge } from "./SourceBadge";
+
+type ResultCardProps = {
+  result: SearchResult;
+  selected: boolean;
+  onSelect: () => void;
+  onSubscribe?: () => void;
+};
+
+export function ResultCard(props: ResultCardProps) {
+  const podcast = () => props.result.podcast;
+
+  return (
+    <box
+      flexDirection="column"
+      padding={1}
+      border={props.selected}
+      borderColor={props.selected ? "cyan" : undefined}
+      backgroundColor={props.selected ? "#222" : undefined}
+      onMouseDown={props.onSelect}
+    >
+      <box
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <box flexDirection="row" gap={2} alignItems="center">
+          <text fg={props.selected ? "cyan" : "white"}>
+            <strong>{podcast().title}</strong>
+          </text>
+          <SourceBadge
+            sourceId={props.result.sourceId}
+            sourceName={props.result.sourceName}
+            sourceType={props.result.sourceType}
+          />
+        </box>
+        <Show when={podcast().isSubscribed}>
+          <text fg="green">[Subscribed]</text>
+        </Show>
+      </box>
+
+      <Show when={podcast().author}>
+        <text fg="gray">by {podcast().author}</text>
+      </Show>
+
+      <Show when={podcast().description}>
+        {(description) => (
+          <text fg={props.selected ? "white" : "gray"}>
+            {description().length > 120
+              ? description().slice(0, 120) + "..."
+              : description()}
+          </text>
+        )}
+      </Show>
+
+      <Show when={(podcast().categories ?? []).length > 0}>
+        <box flexDirection="row" gap={1}>
+          {(podcast().categories ?? []).slice(0, 3).map((category) => (
+            <text fg="yellow">[{category}]</text>
+          ))}
+        </box>
+      </Show>
+
+      <Show when={!podcast().isSubscribed}>
+        <box
+          border
+          padding={0}
+          paddingLeft={1}
+          paddingRight={1}
+          width={18}
+          onMouseDown={(event) => {
+            event.stopPropagation?.();
+            props.onSubscribe?.();
+          }}
+        >
+          <text fg="cyan">[+] Add to Feeds</text>
+        </box>
+      </Show>
+    </box>
+  );
+}