maybe this will allow for reading media + message history combined

src/lib/components/History.svelte

···
 <script lang="ts">
   import MessageTransmission from "$lib/components/MessageTransmission.svelte";
-  import type { SignedMessageView } from "$lib/types";
-  import { calculateMarginTop, signedMessageViewToMessage } from "$lib/utils";
+  import type { SignedItemView } from "$lib/types";
+  import {
+    signedImageViewToImage,
+    signedMessageViewToMessage,
+  } from "$lib/utils";
+  import ImageTransmission from "./ImageTransmission.svelte";
   interface Props {
-    messages: Array<SignedMessageView>;
+    items: Array<SignedItemView>;
   }
-  let { messages }: Props = $props();
+  let { items }: Props = $props();
 </script>
 
 <div id="receiver">
-  {#each [...messages].reverse() as message, i}
-    <MessageTransmission
-      message={signedMessageViewToMessage(message)}
-      margin={0}
-    />
+  {#each [...items].reverse() as item, i (`${item.signet.lrcId}-${item.type}`)}
+    {#if item.type === "message"}
+      <MessageTransmission
+        message={signedMessageViewToMessage(item)}
+        margin={0}
+      />
+    {/if}
+    {#if item.type === "image"}
+      <ImageTransmission image={signedImageViewToImage(item)} margin={0} />
+    {/if}
   {/each}
 </div>
 

src/lib/types.ts

···
     nick?: string
     color?: number
     signetURI: string
+    postedAt: string
 }
 
 export type ItemView = MessageView | MediaView
···
     aspectRatio?: AspectRatio
 }
 
+export type SignedItemView = SignedMessageView | SignedMediaView
+
 export type SignedMessageView = {
+    type: 'message'
     $type?: string
     uri: string
     author: ProfileView
···
     signet: SignetView
     postedAt: string
 }
+
+export type SignedMediaView = SignedImageView
+
+export type SignedImageView = {
+    type: 'image'
+    $type?: string
+    uri: string
+    author: ProfileView
+    image: ImageView
+    nick?: string
+    color?: number
+    signet: SignetView
+    postedAt: string
+}

src/lib/utils.ts

···
 import type { ChannelView } from "$lib/types.ts"
-import type { SignedMessageView, Message } from "$lib/types.ts"
+import type { SignedImageView, SignedMessageView, Message, Image } from "$lib/types.ts"
 export function getChannelWS(c: ChannelView): string | null {
   const host = c.host
   const uri = c.uri
···
   const elapsedMs = currentTime - previousTime;
   const elapsedMinutes = elapsedMs / (1000 * 60);
   return Math.log(elapsedMinutes + 1);
+}
+
+export function signedImageViewToImage(sm: SignedImageView): Image {
+  return {
+    type: 'image',
+    id: sm.signet.lrcId,
+    lrcdata: {
+      muted: false,
+      mine: false
+    },
+    signetView: sm.signet,
+    mediaView: {
+      $type: sm.$type,
+      uri: sm.uri,
+      author: sm.author,
+      imageView: sm.image,
+      ...(sm.nick && { nick: sm.nick }),
+      ...(sm.color && { color: sm.color }),
+      signetURI: sm.signet.uri,
+      postedAt: sm.postedAt
+    }
+  }
 }
 
 export function signedMessageViewToMessage(sm: SignedMessageView): Message {

src/routes/c/[handle]/[rkey]/history/+page.svelte

···
 <script lang="ts">
   import type { PageProps } from "./$types";
   import History from "$lib/components/History.svelte";
+  import type { SignedItemView } from "$lib/types";
+  const nicify = (arr: Array<any>): Array<SignedItemView> => {
+    return arr.map((element) => {
+      if (element["$type"] === "org.xcvr.lrc.defs#signedMessageView") {
+        return { ...element, type: "message" };
+      } else if (element["$type"] === "org.xcvr.lrc.defs#signedMediaView")
+        return { ...element, type: "image" };
+    });
+  };
   let { data }: PageProps = $props();
-  let messages = $state(data.messages);
+  let items = $state(nicify(data.items));
   let nextCursor = $state(data.cursor);
   let hasMore = $derived(!!nextCursor);
   let loading = $state(false);
   const base = import.meta.env.VITE_API_URL;
-  const endpoint = "/xrpc/org.xcvr.lrc.getMessages";
+  const endpoint = "/xrpc/org.xcvr.lrc.getHistory";
   let query = $derived(`?channelURI=${data.uri}&cursor=${nextCursor}`);
   $effect(() => console.log(`${base}${endpoint}${query}`));
-  $effect(() => console.log(messages));
+  $effect(() => console.log(items));
   let scrollContainer: HTMLElement;
   let shouldScrollToBottom = $state(true);
 
   $effect(() => {
-    if (shouldScrollToBottom && scrollContainer && messages.length > 0) {
+    if (shouldScrollToBottom && scrollContainer && items.length > 0) {
       scrollContainer.scrollTop = scrollContainer.scrollHeight;
       shouldScrollToBottom = false;
     }
···
     const oldScrollTop = scrollContainer.scrollTop;
     try {
       const base = import.meta.env.VITE_API_URL;
-      const endpoint = "/xrpc/org.xcvr.lrc.getMessages";
+      const endpoint = "/xrpc/org.xcvr.lrc.getHistory";
       const query = `?channelURI=${data.uri}&cursor=${nextCursor}`;
       const res = await fetch(`${base}${endpoint}${query}`);
       const newData = await res.json();
-      messages = [...messages, ...newData.messages];
+      items = [...items, ...nicify(newData.messages)];
       nextCursor = newData.cursor;
       requestAnimationFrame(() => {
         const newScrollHeight = scrollContainer.scrollHeight;
···
       <span> loading... </span>
     {/if}
   {/if}
-  {#if messages && messages.length !== 0}
-    <History {messages} />
+  {#if items && items.length !== 0}
+    <History {items} />
   {:else}
     <h1>NO HISTORY</h1>
   {/if}

src/routes/c/[handle]/[rkey]/history/+page.ts

···
     if (!uri) throw error(500, 'Invalid channel response')
 
     // Get messages
-    const messagesRes = await fetch(`${base}/xrpc/org.xcvr.lrc.getMessages?channelURI=${uri}`)
-    if (!messagesRes.ok) throw error(messagesRes.status, 'Failed to load messages')
+    const historyRes = await fetch(`${base}/xrpc/org.xcvr.lrc.getHistory?channelURI=${uri}`)
+    if (!historyRes.ok) throw error(historyRes.status, 'Failed to load messages')
 
-    const { messages = [], cursor } = await messagesRes.json()
+    const { items = [], cursor } = await historyRes.json()
 
-    return { messages, cursor, uri }
+    return { items, cursor, uri }
 
   } catch (err) {
     throw error(500, 'Unexpected error')