big refactor

src/lib/colors.ts

···
     return rgbToHex(rgb)
 }
 
+export type ColorSet = {
+    theme: string
+    themetransparent: string
+    themecontrast: string
+    themecontrasttransparent: string
+}
+
+export function colorSetFromTheme(theme: number): ColorSet {
+    const color = numToHex(theme);
+    const cpartial = hexToTransparent(color);
+    const contrast = hexToContrast(color);
+    const partial = hexToTransparent(contrast);
+
+    return {
+        theme: color,
+        themetransparent: cpartial,
+        themecontrast: contrast,
+        themecontrasttransparent: partial,
+    }
+}
+
+
 export function numToHex(num: number) {
     const int = Math.max(Math.min(16777215, Math.floor(num)), 0)
     return "#" + int.toString(16).padStart(6, '0')

src/lib/components/EnbyTransmission.svelte

···
+<script lang="ts">
+  import type { Enby } from "$lib/types";
+
+  interface Props {
+    enby: Enby;
+  }
+  let { enby }: Props = $props();
+</script>

src/lib/components/History.svelte

···
 <script lang="ts">
-  import Transmission from "$lib/components/Transmission.svelte";
+  import MessageTransmission from "$lib/components/MessageTransmission.svelte";
   import type { SignedMessageView } from "$lib/types";
   import { calculateMarginTop, signedMessageViewToMessage } from "$lib/utils";
   interface Props {
···
 
 <div id="receiver">
   {#each [...messages].reverse() as message, i}
-    <Transmission message={signedMessageViewToMessage(message)} margin={0} />
+    <MessageTransmission
+      message={signedMessageViewToMessage(message)}
+      margin={0}
+    />
   {/each}
 </div>
 

src/lib/components/ImageTransmission.svelte

···
 <script lang="ts">
     import type { Image } from "$lib/types";
     import { computePosition, flip, shift, offset } from "@floating-ui/dom";
-    import { hexToContrast, hexToTransparent, numToHex } from "$lib/colors";
+    import { colorSetFromTheme, type ColorSet } from "$lib/colors";
     import { smartAbsoluteTimestamp, dumbAbsoluteTimestamp } from "$lib/utils";
     import ProfileCard from "./ProfileCard.svelte";
     interface Props {
···
         fs?: string;
     }
     let { image, margin, onmute, onunmute, fs }: Props = $props();
-    let color: string = numToHex(image.color ?? 16777215);
-    let cpartial: string = hexToTransparent(color);
-    let contrast: string = hexToContrast(color);
-    let partial: string = hexToTransparent(contrast);
+    let protocol: string = $state(image.mediaView ? "atp" : "lrc");
+    let canatp: boolean = $derived(image.mediaView !== undefined);
+    let canlrc: boolean = $derived(
+        image.lrcdata.init !== undefined || image.lrcdata.pub !== undefined,
+    );
+    let nick: string | undefined = $derived(
+        protocol === "atp" ? image.mediaView?.nick : image.lrcdata.init?.nick,
+    );
+    let handle: string | undefined = $derived(
+        protocol === "atp"
+            ? image.mediaView?.author.handle
+            : image.lrcdata.init?.handle,
+    );
+    let color: number | undefined = $derived(
+        protocol === "atp"
+            ? (image.mediaView?.color ?? image.mediaView?.author.color)
+            : image.lrcdata.init?.color,
+    );
+    let colorSet: ColorSet = $derived(colorSetFromTheme(color ?? 8421504));
+    let src: string | undefined = $derived(
+        protocol === "atp"
+            ? image.mediaView?.imageView?.src
+            : image.lrcdata.pub?.contentAddress,
+    );
+    let alt: string | undefined = $derived(
+        protocol === "atp"
+            ? image.mediaView?.imageView?.alt
+            : image.lrcdata.pub?.alt,
+    );
     let triggerEl: HTMLElement | undefined = $state();
     let profileEl: HTMLElement | undefined = $state();
     let showProfile = $state(false);
···
     let pinned = $state(false);
 </script>
 
-{#if image.muted === false}
+{#if image.lrcdata.muted === false}
     <div
-        style:--theme={color}
-        style:--themep={cpartial}
-        style:--tcontrast={contrast}
-        style:--tpartial={partial}
+        style:--theme={colorSet.theme}
+        style:--themep={colorSet.themetransparent}
+        style:--tcontrast={colorSet.themecontrast}
+        style:--tpartial={colorSet.themecontrasttransparent}
         style:--margin={margin + "rem"}
         style:--size={fs ?? "1rem"}
-        class="{image.active ? 'active' : ''} 
-    {image.profileView ? 'signed' : ''} 
+        class="{image.lrcdata.pub || image.mediaView ? '' : 'active'} 
+    {image.mediaView ? 'signed' : ''} 
     {pinned ? 'pinned' : ''} 
-    {image.nick ? '' : 'late'} 
+    {image.lrcdata.init ? '' : 'late'} 
     imageTransmission"
     >
         <div class="header">
-            <span class="nick">{image.nick ?? "???"}</span
-            >{#if image.handle}{#if !image.profileView}<span class="handle"
-                        >@{image.handle}</span
+            <span class="nick">{nick ?? ""}</span>{#if handle !== undefined}
+                {#if !image.mediaView?.author}<span class="handle"
+                        >@{handle}</span
                     >{:else}<div
                         role="button"
                         tabindex="0"
···
                         <a
                             bind:this={triggerEl}
                             class="handle"
-                            href={`/p/${image.handle}`}>@{image.handle}</a
+                            href={`/p/${handle}`}>@{handle}</a
                         >
                         {#if showProfile}
                             <div
                                 class="profile-container"
                                 bind:this={profileEl}
                             >
-                                <ProfileCard profile={image.profileView} />
+                                <ProfileCard profile={image.mediaView.author} />
                             </div>
                         {/if}
                     </div>
                 {/if}
-                <span
-                    class="time clickable"
-                    title={dumbAbsoluteTimestamp(image.startedAt)}
-                >
-                    {smartAbsoluteTimestamp(image.startedAt)}
-                </span>
+                {#if protocol === "atp"}
+                    {#if canlrc}
+                        <button
+                            class="clickable"
+                            onclick={() => {
+                                protocol = "lrc";
+                            }}
+                        >
+                            atproto, switch to lrc
+                        </button>
+                    {:else}
+                        <span class="clickable">atproto</span>
+                    {/if}
+                {:else if canatp}
+                    <button
+                        class="clickable"
+                        onclick={() => (protocol = "atp")}
+                    >
+                        lrc, switch to atproto
+                    </button>
+                {:else}
+                    <span class="clickable">lrc</span>
+                {/if}
+                {#if image.signetView?.startedAt}
+                    <span
+                        class="time clickable"
+                        title={dumbAbsoluteTimestamp(
+                            Date.parse(image.signetView.startedAt),
+                        )}
+                    >
+                        {smartAbsoluteTimestamp(
+                            Date.parse(image.signetView.startedAt),
+                        )}
+                    </span>
+                {/if}
                 <button
                     class="clickable"
                     onclick={() => {
···
                 >
                     {pinned ? "unpin" : "pin"}
                 </button>
-                {#if image.mine !== true}
+                {#if image.lrcdata.mine !== true}
                     <button
                         class="mute clickable"
                         onclick={() => {
-                            image.muted = true;
+                            image.lrcdata.mine = true;
                             onmute?.(image.id);
                         }}
                     >
···
                 {/if}
             {/if}
         </div>
-        {#if image.src || image.msrc}
+        {#if src}
             <div class="image-wrapper">
-                <img
-                    class="bg-img"
-                    src={image.msrc ? image.msrc : image.src}
-                    alt={image.alt}
-                />
-                <img
-                    class="fg-img"
-                    src={image.msrc ? image.msrc : image.src}
-                    alt={image.alt}
-                />
+                <img class="bg-img" {src} {alt} />
+                <img class="fg-img" {src} {alt} />
             </div>
         {:else}
             i don't have an image yet
···
     <button
         class="unmute"
         onclick={() => {
-            image.muted = false;
+            image.lrcdata.muted = false;
             onunmute?.(image.id);
         }}
     >

src/lib/components/Receiever.svelte

···
 <script lang="ts">
-  import Transmission from "$lib/components/Transmission.svelte";
+  import EnbyTransmission from "$lib/components/EnbyTransmission.svelte";
+  import MessageTransmission from "$lib/components/MessageTransmission.svelte";
   import ImageTransmission from "$lib/components/ImageTransmission.svelte";
-  import type { Message, Image, Item } from "$lib/types";
-  import { isMessage, isImage } from "$lib/types";
-  import type { Action } from "svelte/action";
+  import type { Item } from "$lib/types";
+  import { isMessage, isImage, isEnby } from "$lib/types";
   interface Props {
     items: Array<Item>;
     mylocaltext?: string;
···
   let length = $derived(items.length);
   let innerWidth = $state(0);
   let isDesktop = $derived(innerWidth > 1000);
-  const attachImage: Action<HTMLDivElement, HTMLImageElement | undefined> = (
-    node,
-    img,
-  ) => {
-    $effect(() => {
-      if (img != null) node.appendChild(img);
-      node.innerText = "bebebe";
-      return () => {
-        if (img != null) node.removeChild(img);
-      };
-    });
-  };
 </script>
 
 <svelte:window bind:innerWidth />
 <div id="receiver">
-  {#each items as item, index}
+  {#each items as item, index (item.id)}
     {@const last = length - 1}
     {@const diff = last - index}
     {@const guess = 2 + (Math.atan((diff - 19) * 0.25) / -2.8 - 0.45)}
     {@const res = Math.min(Math.max(guess, 1), 2)}
-    {#if isMessage(item)}
-      <Transmission
+    {#if isEnby(item)}
+      <EnbyTransmission enby={item} />
+    {:else if isMessage(item)}
+      <MessageTransmission
         message={item}
-        mylocaltext={item.active && item.mine ? mylocaltext : undefined}
+        mylocaltext={item.lrcdata.mine && !item.lrcdata.pub
+          ? mylocaltext
+          : undefined}
         margin={0}
         {onmute}
         {onunmute}

src/lib/components/Transmission.svelte src/lib/components/MessageTransmission.svelte

···
     import type { Message } from "$lib/types";
     import * as linkify from "linkifyjs";
     import { computePosition, flip, shift, offset } from "@floating-ui/dom";
-    import { hexToContrast, hexToTransparent, numToHex } from "$lib/colors";
+    import { colorSetFromTheme } from "$lib/colors";
+    import type { ColorSet } from "$lib/colors";
     import { smartAbsoluteTimestamp, dumbAbsoluteTimestamp } from "$lib/utils";
     import ProfileCard from "./ProfileCard.svelte";
     import diff from "fast-diff";
···
     }
     let { message, margin, mylocaltext, onmute, onunmute, fs }: Props =
         $props();
-    let color: string = numToHex(message.color ?? 16777215);
-    let cpartial: string = hexToTransparent(color);
-    let contrast: string = hexToContrast(color);
-    let partial: string = hexToTransparent(contrast);
+    let protocol: string = $state(message.messageView ? "atp" : "lrc");
+    let canatp: boolean = $derived(message.messageView !== undefined);
+    let canlrc: boolean = $derived(
+        message.lrcdata.init !== undefined || message.lrcdata.pub !== undefined,
+    );
+    let nick: string | undefined = $derived(
+        protocol === "atp"
+            ? message.messageView?.nick
+            : message.lrcdata.init?.nick,
+    );
+    let handle: string | undefined = $derived(
+        protocol === "atp"
+            ? message.messageView?.author.handle
+            : message.lrcdata.init?.handle,
+    );
+    let color: number | undefined = $derived(
+        protocol === "atp"
+            ? (message.messageView?.color ?? message.messageView?.author.color)
+            : message.lrcdata.init?.color,
+    );
+    let colorSet: ColorSet = $derived(colorSetFromTheme(color ?? 8421504));
     let triggerEl: HTMLElement | undefined = $state();
     let profileEl: HTMLElement | undefined = $state();
     let showProfile = $state(false);
···
         div.textContent = text;
         return div.innerHTML;
     };
-    let canshownotlrc = $derived(
-        message.mbody !== undefined && message.mbody !== message.body,
-    );
-    let showinglrc = $state(message.mbody !== undefined);
     const convertLinksToMessageFrags = (body: string) => {
         const ebody = escapeHTML(body);
         const links = linkify.find(body, "url");
···
     };
     let mfrags = $derived(
         convertLinksToMessageFrags(
-            showinglrc ? message.body : (message.mbody ?? message.body),
+            protocol === "lrc"
+                ? message.lrcdata.body
+                : (message.messageView?.body ??
+                      "i'm showing atproto data when i shouldn't be!"),
         ),
     );
     let diffs = $derived(
-        message.active && message.mine && mylocaltext
-            ? diff(message.body, mylocaltext)
+        message.lrcdata.pub && message.lrcdata.mine && mylocaltext
+            ? diff(message.lrcdata.body, mylocaltext)
             : null,
     );
     let pinned = $state(false);
 </script>
 
-{#if message.muted === false}
+{#if message.lrcdata.muted === false}
     <div
-        style:--theme={color}
-        style:--themep={cpartial}
-        style:--tcontrast={contrast}
-        style:--tpartial={partial}
+        style:--theme={colorSet.theme}
+        style:--themep={colorSet.themetransparent}
+        style:--tcontrast={colorSet.themecontrast}
+        style:--tpartial={colorSet.themecontrasttransparent}
         style:--margin={margin + "rem"}
         style:--size={fs ?? "1rem"}
-        class="{message.active ? 'active' : ''} 
-    {message.profileView ? 'signed' : ''} 
+        class="{message.lrcdata.pub || message.messageView ? '' : 'active'} 
+    {message.messageView?.author ? 'signed' : ''} 
     {pinned ? 'pinned' : ''} 
-    {message.nick ? '' : 'late'} 
+    {message.lrcdata.init ? '' : 'late'} 
     transmission"
     >
         <div class="header">
-            <span class="nick">{message.nick ?? "???"}</span
-            >{#if message.handle}{#if !message.profileView}<span class="handle"
-                        >@{message.handle}</span
+            <span class="nick">{nick ?? ""}</span>{#if handle !== undefined}
+                {#if !message.messageView?.author}<span class="handle"
+                        >@{handle}</span
                     >{:else}<div
                         role="button"
                         tabindex="0"
···
                         <a
                             bind:this={triggerEl}
                             class="handle"
-                            href={`/p/${message.handle}`}>@{message.handle}</a
+                            href={`/p/${handle}`}>@{handle}</a
                         >
                         {#if showProfile}
                             <div
                                 class="profile-container"
                                 bind:this={profileEl}
                             >
-                                <ProfileCard profile={message.profileView} />
+                                <ProfileCard
+                                    profile={message.messageView.author}
+                                />
                             </div>
                         {/if}
                     </div>
                 {/if}
-                <span
-                    class="time clickable"
-                    title={dumbAbsoluteTimestamp(message.startedAt)}
-                >
-                    {smartAbsoluteTimestamp(message.startedAt)}
-                </span>
+                {#if protocol === "atp"}
+                    {#if canlrc}
+                        <button
+                            class="clickable"
+                            onclick={() => {
+                                protocol = "lrc";
+                            }}
+                        >
+                            atproto, switch to lrc
+                        </button>
+                    {:else}
+                        <span class="clickable">atproto</span>
+                    {/if}
+                {:else if canatp}
+                    <button
+                        class="clickable"
+                        onclick={() => (protocol = "atp")}
+                    >
+                        lrc, switch to atproto
+                    </button>
+                {:else}
+                    <span class="clickable">lrc</span>
+                {/if}
+                {#if message.signetView?.startedAt}
+                    <span
+                        class="time clickable"
+                        title={dumbAbsoluteTimestamp(
+                            Date.parse(message.signetView.startedAt),
+                        )}
+                    >
+                        {smartAbsoluteTimestamp(
+                            Date.parse(message.signetView.startedAt),
+                        )}
+                    </span>
+                {/if}
                 <button
                     class="clickable"
                     onclick={() => {
···
                 >
                     {pinned ? "unpin" : "pin"}
                 </button>
-                {#if message.mine !== true}
+                {#if message.lrcdata.mine !== true}
                     <button
                         class="mute clickable"
                         onclick={() => {
-                            message.muted = true;
+                            message.lrcdata.muted = true;
                             onmute?.(message.id);
                         }}
                     >
                         mute
                     </button>
                 {/if}
-                {#if canshownotlrc}<span class="clickable"
-                        ><button
-                            onclick={() => {
-                                showinglrc = !showinglrc;
-                            }}
-                            >{showinglrc
-                                ? "go back to atproto"
-                                : "I WAS THERE!"}</button
-                        > (difference between atproto + lrc detected)</span
-                    >{/if}
             {/if}
         </div>
         <div class="body">
···
     <button
         class="unmute"
         onclick={() => {
-            message.muted = false;
+            message.lrcdata.muted = false;
             onunmute?.(message.id);
         }}
     >

src/lib/components/Transmitter.svelte

···
         const el = event.target as HTMLInputElement;
         switch (event.inputType) {
             case "insertLineBreak": {
-                if (ctx.myID === undefined) {
+                if (ctx.myMessage === undefined) {
                     event.preventDefault();
                     return;
                 }
···
         if (imageURL) {
             URL.revokeObjectURL(imageURL);
         }
-        ctx.atpblob = undefined;
-        ctx.pubImage("", undefined, undefined);
+
+        ctx.cancelImage();
         imageAlt = "";
         imageURL = undefined;
     };
···
                 fs={isDesktop ? "2rem" : "1rem"}
             />
             <button onclick={cancelimagepost}> cancel </button>
-            {#if ctx.atpblob !== undefined}
+            {#if ctx.myMedia?.atpblob !== undefined}
                 <button onclick={uploadimage}> confirm </button>
             {:else}
                 uploading...

src/lib/types.ts

···
-import * as lrc from '@rachel-mp4/lrcproto'
 export type Channel = {
     title: string
     host: string
···
     avatar?: string
 }
 
-type BaseItem = {
-    uri?: string
+export type Item = Message | Media | Enby
+
+export type Enby = {
+    type: 'enby'
+    id: number
+    lrcdata: LrcBaseItem
+    signetView?: SignetView
+}
+
+export type Message = {
+    type: 'message'
     id: number
-    active: boolean
+    lrcdata: LrcMessage
+    messageView?: MessageView
+    signetView?: SignetView
+}
+
+export type Media = Image
+
+export type Image = {
+    type: 'image'
+    id: number
+    lrcdata: LrcMedia
+    mediaView?: MediaView
+    signetView?: SignetView
+    atpblob?: AtpBlob
+}
+
+export type LrcMessage = LrcBaseItem & {
+    body: string
+    pub?: LrcMessagePub
+}
+
+export type LrcMedia = LrcBaseItem & {
+    pub?: LrcMediaPub
+}
+
+export type LrcBaseItem = {
     mine: boolean
     muted: boolean
+    init?: LrcInit
+}
+
+export type LrcInit = {
     color?: number
+    nick?: string
     handle?: string
-    profileView?: ProfileView
-    signetView?: SignetView
-    nick?: string
-    startedAt: number
+    nonce?: Uint8Array
 }
 
+export type LrcMediaPub = {
+    alt: string
+    contentAddress?: string
+}
+
+export type LrcMessagePub = boolean
+
 export type AspectRatio = {
     width: number
     height: number
 }
 
-export type Image = BaseItem & {
-    type: 'image'
-    alt?: string
-    malt?: string
-    src?: string
-    msrc?: string
-    aspectRatio?: AspectRatio
-    maspectRatio?: AspectRatio
+export function isEnby(item: Item): item is Enby {
+    return item.type === "enby"
+}
+
+export function isMessage(item: Item): item is Message {
+    return item.type === 'message' || item.type === 'enby'
+}
+
+export function isImage(item: Item): item is Image {
+    return item.type === 'image' || item.type === 'enby'
+}
+
+export function isMedia(item: Item): item is Media {
+    return isImage(item)
 }
 
-export type Message = BaseItem & {
-    type: 'message'
-    body: string
-    mbody?: string
+export type AtpBlob = {
+    $type: string
+    ref: {
+        $link: string
+    }
+    mimeType: string
+    size: number
 }
-export type Item = Message | Image
 
-export function isMessage(item: Item): item is Message {
-    return item.type === 'message'
+export type AtpImage = {
+    $type: string
+    alt: string
+    aspectRatio?: ATPAspectRatio
+    blob?: AtpBlob
 }
 
-export function isImage(item: Item): item is Image {
-    return item.type === 'image'
+export type ATPAspectRatio = {
+    width: number
+    height: number
 }
 
 export type LogItem = {
···
     color?: number
     signetURI: string
 }
+
+export type ItemView = MessageView | MediaView
 
 export type ImageView = {
     $type?: string

src/lib/utils.ts

···
 export function signedMessageViewToMessage(sm: SignedMessageView): Message {
   return {
     type: 'message',
-    uri: sm.uri,
-    body: sm.body,
     id: sm.signet.lrcId,
-    active: false,
-    mine: false,
-    muted: false,
-    ...(sm.color && { color: sm.color }),
-    handle: sm.author.handle,
-    profileView: sm.author,
+    lrcdata: {
+      body: "",
+      muted: false,
+      mine: false
+    },
     signetView: sm.signet,
-    ...(sm.nick && { nick: sm.nick }),
-    startedAt: Date.parse(sm.signet.startedAt),
+    messageView: {
+      $type: sm.$type,
+      uri: sm.uri,
+      author: sm.author,
+      body: sm.body,
+      ...(sm.nick && { nick: sm.nick }),
+      ...(sm.color && { color: sm.color }),
+      signetURI: sm.signet.uri,
+      postedAt: sm.postedAt
+    }
   }
 }
 export function sanitizeHandle(input: string) {

src/lib/wscontext.svelte.ts

···
-import type { AspectRatio, Item, Image, Message, LogItem, SignetView, MessageView, MediaView, ImageView } from "./types"
-import { isMessage, isImage } from "./types"
+import type * as xcvr from "./types"
+import { isMessage, isImage, isMedia } from "./types"
 import * as lrc from '@rachel-mp4/lrcproto/gen/ts/lrc'
 
-// so the thing with the current message is that i require a signet to post
-// which is not ideal because you might be in an lrc server that is working
-// but the atproto integration isn't, and i want it to still be somewhat ok
-// in that case. additionally, it means that in the first like round trip +
-// however long it takes for atproto to propogate, you can't submit your
-// message either.
-// so i want to make that side of things better
-type ATPBlob = {
-    $type: string
-    ref: {
-        $link: string
-    }
-    mimeType: string
-    size: number
-}
-
-type ATPImage = {
-    $type: string
-    alt: string
-    aspectRatio?: ATPAspectRatio
-    blob?: ATPBlob
-}
-
-type ATPAspectRatio = {
-    width: number
-    height: number
-}
-
 export class WSContext {
-    items: Array<Item> = $state(new Array())
-    orphanedSignets: Map<string, SignetView> = new Map()
-    orphanedMessages: Map<string, MessageView> = new Map()
-    orphanedMedias: Map<string, MediaView> = new Map()
-    log: Array<LogItem> = $state(new Array())
+    existingindices: Map<number, boolean> = new Map()
+    existinguris: Map<string, string> = new Map()
+    items: Array<xcvr.Item> = $state(new Array())
+    log: Array<xcvr.LogItem> = $state(new Array())
     topic: string = $state("")
     connected: boolean = $state(false)
     conncount = $state(0)
···
     color: number = $state(Math.floor(Math.random() * 16777216))
 
     channelUri: string
-    active: boolean = false
-    mediaactive: boolean = false
     nick: string = "wanderer"
     handle: string = ""
-
-    myID: undefined | number
-    myNonce: undefined | Uint8Array
     curMsg: string = $state("")
-    mySignet: undefined | SignetView
-
-    myMediaID: undefined | number
-    myMediaNonce: undefined | Uint8Array
-    atpblob: ATPBlob | undefined = $state()
-    myMediaSignet: undefined | SignetView
+    myMessage: xcvr.Message | undefined
+    messageactive: boolean = false
+    myMedia: xcvr.Media | undefined
+    mediaactive: boolean = false
 
     audio: HTMLAudioElement = new Audio('/notif.wav')
     shortaudio: HTMLAudioElement = new Audio('/shortnotif.wav')
···
         this.ls?.close()
         connectTo(url, this)
         this.items = []
-        this.orphanedMessages = new Map()
-        this.orphanedMedias = new Map()
-        this.orphanedSignets = new Map()
-        this.mySignet = undefined
-        this.myID = undefined
-        this.myNonce = undefined
     }
 
     disconnect = () => {
···
         this.ls?.close()
         this.ls = null
         this.items = []
-        this.orphanedMessages = new Map()
-        this.orphanedMedias = new Map()
-        this.orphanedSignets = new Map()
-        this.mySignet = undefined
-        this.myID = undefined
-        this.myNonce = undefined
     }
 
     starttransmit = () => {
···
     }
 
     insertLineBreak = () => {
-        if (this.active) {
+        if (this.myMessage) {
             this.starttransmit()
             pubMessage(this)
             const api = import.meta.env.VITE_API_URL
···
             }
             console.log(body)
             const record = {
-                ...(this.mySignet && { signetURI: this.mySignet.uri }),
+                ...(this.myMessage.signetView && { signetURI: this.myMessage.signetView.uri }),
                 ...(this.channelUri && { channelURI: this.channelUri }),
-                ...(this.myID && { messageID: this.myID }),
-                ...(this.myNonce && { nonce: b64encodebytearray(this.myNonce) }),
+                messageID: this.myMessage.id,
+                ...(this.myMessage.lrcdata?.init?.nonce && { nonce: b64encodebytearray(this.myMessage.lrcdata.init.nonce) }),
                 body: body,
                 ...(this.nick && { nick: this.nick }),
                 ...(this.color && { color: this.color }),
···
                     }, 2000)
                 })
             }
-            this.active = false
+            this.myMessage = undefined
+            this.messageactive = false
             this.curMsg = ""
-            this.mySignet = undefined
-            this.myID = undefined
+        } else if (this.messageactive) {
+            this.starttransmit()
+            pubMessage(this)
+            this.messageactive = false
+            this.curMsg = ""
         }
     }
 
     pubImage = (alt: string, width: number | undefined, height: number | undefined) => {
-        if (this.atpblob) {
-            let aspectRatio: AspectRatio | undefined
+        if (this.myMedia) {
+            let aspectRatio: xcvr.AspectRatio | undefined
             if (width && height) {
                 aspectRatio = {
                     width: width,
                     height: height
                 }
             }
-            const image: ATPImage = {
+            const image: xcvr.AtpImage = {
                 $type: "org.xcvr.lrc.image",
                 alt: alt,
-                blob: this.atpblob,
+                ...(this.myMedia.atpblob && { blob: this.myMedia.atpblob }),
                 ...(aspectRatio && { aspectRatio: aspectRatio })
             }
             const record = {
-                ...(this.myMediaSignet && { signetURI: this.myMediaSignet.uri }),
+                ...(this.myMedia.signetView && { signetURI: this.myMedia.signetView.uri }),
                 ...(this.channelUri && { channelURI: this.channelUri }),
-                ...(this.myMediaID && { messageID: this.myMediaID }),
-                ...(this.myNonce && { nonce: b64encodebytearray(this.myNonce) }),
+                messageID: this.myMedia.id,
+                ...(this.myMedia.lrcdata?.init?.nonce && { nonce: b64encodebytearray(this.myMedia.lrcdata.init.nonce) }),
                 image: image,
                 ...(this.nick && { nick: this.nick }),
                 ...(this.color && { color: this.color }),
···
                     }).then((val) => console.log(val), (val) => console.log(val))
                 }, 2000)
             })
-            const contentAddress = `${api}/xrpc/org.xcvr.lrc.getImage?handle=${this.handle}&cid=${this.atpblob.ref["$link"]}`
-            if (this.mediaactive) {
+            if (this.myMedia.atpblob) {
+                const contentAddress = `${api}/xrpc/org.xcvr.lrc.getImage?handle=${this.handle}&cid=${this.myMedia.atpblob.ref["$link"]}`
                 pubImage(alt, contentAddress, this)
+            } else {
+                pubImage(alt, undefined, this)
             }
+            this.myMedia = undefined
             this.mediaactive = false
-            this.atpblob = undefined
-            this.myMediaSignet = undefined
-            this.myMediaID = undefined
-        } else {
+        } else if (this.mediaactive) {
             pubImage(alt, undefined, this)
+            this.mediaactive = false
         }
     }
+    cancelImage = () => {
+        if (this.mediaactive) {
+            pubImage(undefined, undefined, this)
+            this.myMedia = undefined
+            this.mediaactive = false
+        }
+
+    }
 
     initImage = (blob: File) => {
-        if (!this.mediaactive) {
+        if (!this.myMedia) {
             initImage(this)
-            this.mediaactive = true
             const api = import.meta.env.VITE_API_URL
             const endpoint = `${api}/lrc/image`
             const formData = new FormData()
···
             }).then((response) => {
                 if (response.ok) {
                     response.json().then((atpblob) => {
-                        this.atpblob = atpblob
+                        if (this.myMedia) {
+                            this.myMedia.atpblob = atpblob
+                        }
                     }
                     )
                 } else {
···
 
 
     insert = (idx: number, s: string) => {
-        if (!this.active) {
+        if (!this.messageactive) {
             initMessage(this)
-            this.active = true
+            this.messageactive = true
         }
         insertMessage(idx, s, this)
         this.curMsg = insertSIntoAStringAtIdx(s, this.curMsg, idx)
     }
 
     delete = (idx: number, idx2: number) => {
-        if (!this.active) {
+        if (!this.messageactive) {
             return
         }
         deleteMessage(idx, idx2, this)
···
         this.conncount = cc
     }
 
-    // theoretically this could occur _after we have an orphaned signet or an orphanedmessage or both! so,
-    // TODO: make it work in that case
-    pushItem = (item: Item) => {
+    pushItem = (item: xcvr.Item) => {
+        if (this.existingindices.get(item.id)) {
+            console.log("you tried to push an item who exists!")
+            return
+        }
         if (document.hidden || !document.hasFocus()) {
             this.audio.currentTime = 0
             this.audio.play()
-        } else if (!item.mine) {
+        } else if (!item.lrcdata.mine) {
             this.shortaudio.currentTime = 0
             this.shortaudio.play()
         }
-        if (this.items.length > 200) {
-            this.items = [...this.items.slice(this.items.length - 199), item]
-        } else {
-            this.items.push(item)
+        this.items.push(item)
+        if (item.lrcdata.mine) {
+            if (isMessage(item)) {
+                this.myMessage = item
+            } else if (isMedia(item)) {
+                this.myMedia = item
+            }
         }
+        this.existingindices.set(item.id, true)
     }
 
-    replaceItem = (id: number, newItem: Item) => {
-        this.items = this.items.map((item: Item) => {
-            return item.id === id ? newItem : item
-        })
+    initMessage = (id: number, init: xcvr.LrcInit, mine: boolean) => {
+        if (this.existingindices.get(id)) {
+            this.items = this.items.map((item: xcvr.Item) => {
+                return item.id === id && isMessage(item)
+                    ? { ...item, type: "message", lrcdata: { ...item.lrcdata, init: init } }
+                    : item
+            })
+        } else {
+            this.pushItem({
+                type: 'message',
+                id: id,
+                lrcdata: {
+                    body: '',
+                    mine: mine,
+                    muted: false,
+                    init: init,
+                },
+            })
+        }
     }
 
-    pubItem = (id: number) => {
-        this.items = this.items.map((item: Item) => {
-            return isMessage(item) && item.id === id ? { ...item, active: false } : item
-        })
+    initMedia = (id: number, init: xcvr.LrcInit, mine: boolean) => {
+        if (this.existingindices.get(id)) {
+            this.items = this.items.map((item: xcvr.Item) => {
+                return item.id === id && isImage(item)
+                    ? { ...item, type: "image", lrcdata: { ...item.lrcdata, init: init } }
+                    : item
+            })
+        } else {
+            this.pushItem({
+                type: 'image',
+                id: id,
+                lrcdata: {
+                    mine: mine,
+                    muted: false,
+                    init: init,
+                },
+            })
+        }
     }
 
-    mediapubItem = (id: number, alt: string | undefined, contentAddress: string | undefined) => {
-        this.items = this.items.map((item: Item) => {
-            return isImage(item) && item.id === id ? { ...item, active: false, alt: alt, src: contentAddress } : item
-        })
+    initMute = (id: number) => {
+        if (this.existingindices.get(id)) {
+            this.items = this.items.map((item: xcvr.Item) => {
+                return item.id === id
+                    ? { ...item, lrcdata: { ...item.lrcdata, muted: true } } as typeof item
+                    : item
+            })
+        } else {
+            this.pushItem({
+                type: 'enby',
+                id: id,
+                lrcdata: {
+                    mine: false,
+                    muted: true,
+                }
+            })
+        }
     }
 
-    insertMessage = (id: number, idx: number, s: string) => {
-        this.ensureExistenceOfMessage(id)
-        this.items = this.items.map((item: Item) => {
-            return isMessage(item) && item.id === id ? { ...item, body: insertSIntoAStringAtIdx(s, item.body, idx) } : item
-        })
+    pubMessage = (id: number) => {
+        if (this.existingindices.get(id)) {
+            this.items = this.items.map((item: xcvr.Item) => {
+                return item.id === id && isMessage(item)
+                    ? { ...item, type: "message", lrcdata: { ...item.lrcdata, pub: true } }
+                    : item
+            })
+        } else {
+            this.pushItem({
+                type: "message",
+                id: id,
+                lrcdata: {
+                    mine: false,
+                    muted: false,
+                    body: "",
+                },
+            })
+        }
     }
 
-    deleteMessage = (id: number, idx1: number, idx2: number) => {
-        this.ensureExistenceOfMessage(id)
-        this.items = this.items.map((item: Item) => {
-            return isMessage(item) && item.id === id ? { ...item, body: deleteFromAStringBetweenIdxs(item.body, idx1, idx2) } : item
-        })
+    pubMedia = (id: number, pub: xcvr.LrcMediaPub) => {
+        if (this.existingindices.get(id)) {
+            this.items = this.items.map((item: xcvr.Item) => {
+                return item.id === id && isMedia(item)
+                    ? {
+                        ...item, type: "image",
+                        lrcdata: {
+                            ...item.lrcdata,
+                            pub: pub
+                        }
+                    }
+                    : item
+            })
+        } else {
+            this.pushItem({
+                type: "image",
+                id: id,
+                lrcdata: {
+                    mine: false,
+                    muted: false,
+                    pub: pub,
+                },
+            })
+        }
     }
 
-    ensureExistenceOfMessage = (id: number) => {
-        const idx = this.items.findIndex((item) => { return item.id === id })
-        if (idx === -1) {
+    insertMessage = (id: number, idx: number, s: string) => {
+        if (this.existingindices.get(id)) {
+            this.items = this.items.map((item: xcvr.Item) => {
+                return item.id === id && isMessage(item)
+                    ? { ...item, type: "message", lrcdata: { ...item.lrcdata, body: insertSIntoAStringAtIdx(s, item.lrcdata.body, idx) } }
+                    : item
+            })
+        } else {
             this.pushItem({
-                type: 'message',
-                body: "",
+                type: "message",
                 id: id,
-                active: true,
-                mine: false,
-                muted: false,
-                startedAt: Date.now(),
+                lrcdata: {
+                    mine: false,
+                    muted: false,
+                    body: insertSIntoAStringAtIdx(s, "", idx),
+                    pub: false
+                },
             })
         }
     }
 
-    addSignet = (signet: SignetView) => {
-        if (signet.lrcId === this.myID) {
-            this.mySignet = signet
-        }
-        if (signet.lrcId === this.myMediaID) {
-            this.myMediaSignet = signet
-        }
-        console.log("now we are signing")
-        const arrayIdx = this.items.findIndex(item => item.id === signet.lrcId)
-        if (arrayIdx !== -1) {
-            console.log("found appropriate signet c:")
-            this.items = this.items.map((item: Item) => {
-                return item.id === signet.lrcId ? { ...item, signetView: signet } : item
+    deleteMessage = (id: number, idx1: number, idx2: number) => {
+        if (this.existingindices.get(id)) {
+            this.items = this.items.map((item: xcvr.Item) => {
+                return item.id === id && isMessage(item)
+                    ? { ...item, type: "message", lrcdata: { ...item.lrcdata, body: deleteFromAStringBetweenIdxs(item.lrcdata.body, idx1, idx2) } }
+                    : item
             })
         } else {
-            console.log("couldn't find appropriate signet :c")
-            const om = this.orphanedMessages.get(signet.uri)
-            if (om !== undefined) {
-                console.log("some orphan logic")
-                const message = makeMessageFromSignetAndMessageViews(om, signet)
-                const idx = this.items.findIndex(item => item.id > signet.lrcId)
-                if (idx === -1) {
-                    this.items.push(message)
-                } else {
-                    this.items = [...this.items.slice(0, idx), message, ...this.items.slice(idx)]
-                }
-                this.orphanedMessages.delete(signet.uri)
-                return
-            }
-            const oi = this.orphanedMedias.get(signet.uri)
-            if (oi !== undefined) {
-                console.log("comse orphan logic 2")
-                const image = makeImageFromSignetAndImageMediaViews(oi, signet)
-                const idx = this.items.findIndex(item => item.id > signet.lrcId)
-                if (idx === -1) {
-                    this.items.push(image)
-                } else {
-                    this.items = [...this.items.slice(0, idx), image, ...this.items.slice(idx)]
-                }
-                this.orphanedMedias.delete(signet.uri)
-                return
-            }
-            this.orphanedSignets.set(signet.uri, signet)
+            this.pushItem({
+                type: "message",
+                id: id,
+                lrcdata: {
+                    mine: false,
+                    muted: false,
+                    body: deleteFromAStringBetweenIdxs("", idx1, idx2),
+                    pub: false
+                },
+            })
         }
     }
 
-    verifyMessage = (message: MessageView) => {
-        console.log("now we are verifying!")
-        console.log(message.signetURI)
-        const arrayIdx = this.items.findIndex(item => item.signetView?.uri === message.signetURI && item.signetView?.authorHandle === message.author.handle)
-        if (arrayIdx !== -1) {
-            console.log("found appropriate message c:")
-            this.items = this.items.map((item: Item) => {
-                return item.signetView?.uri === message.signetURI && isMessage(item) ?
-                    { ...makeMessageFromSignetAndMessageViews(message, item.signetView), body: item.body, mine: item.mine } : item
+    addSignet = (signet: xcvr.SignetView) => {
+        if (this.existingindices.get(signet.lrcId)) {
+            this.items = this.items.map((item: xcvr.Item) => {
+                return item.id === signet.lrcId
+                    ? { ...item, signetView: signet }
+                    : item
+            })
+        } else {
+            this.pushItem({
+                type: "enby",
+                id: signet.lrcId,
+                lrcdata: { mine: false, muted: false },
+                signetView: signet
             })
         }
-        else {
-            console.log("couldn't find appropriate message :c")
-            const os = this.orphanedSignets.get(message.signetURI)
-            if (os !== undefined) {
-                console.log("some orphan logic")
-                const m = makeMessageFromSignetAndMessageViews(message, os)
-                const idx = this.items.findIndex(item => item.id > os.lrcId)
-                if (idx === -1) {
-                    this.items.push(m)
-                } else {
-                    this.items = [...this.items.slice(0, idx), m, ...this.items.slice(idx)]
-                }
-                this.orphanedSignets.delete(os.uri)
-            } else {
-                this.orphanedMessages.set(message.signetURI, message)
-            }
-        }
+        this.existinguris.set(signet.uri, signet.authorHandle)
     }
 
-    verifyImageMediaView = (media: MediaView) => {
-        console.log("now we are verifying!")
-        console.log(media.signetURI)
-        const arrayIdx = this.items.findIndex(item => item.signetView?.uri === media.signetURI && item.signetView?.authorHandle === media.author.handle)
-        if (arrayIdx !== -1) {
-            console.log("found appropriate message c:")
-            this.items = this.items.map((item: Item) => {
-                return item.signetView?.uri === media.signetURI && isMessage(item) ?
-                    { ...makeImageFromSignetAndImageMediaViews(media, item.signetView), body: item.body, mine: item.mine } : item
+    addMessageView = (message: xcvr.MessageView) => {
+        if (this.existinguris.get(message.signetURI) === message.author.handle) {
+            this.items = this.items.map((item: xcvr.Item) => {
+                return item.signetView?.uri === message.signetURI && isMessage(item)
+                    ? { ...item, type: "message", messageView: message }
+                    : item
             })
+            this.existinguris.delete(message.signetURI)
+        } else {
+            console.error("recieved a messageview who doesn't have a matching signet, rejecting: ", message)
         }
-        else {
-            console.log("couldn't find appropriate message :c")
-            const os = this.orphanedSignets.get(media.signetURI)
-            if (os !== undefined) {
-                console.log("some orphan logic")
-                const m = makeImageFromSignetAndImageMediaViews(media, os)
-                const idx = this.items.findIndex(item => item.id > os.lrcId)
-                if (idx === -1) {
-                    this.items.push(m)
-                } else {
-                    this.items = [...this.items.slice(0, idx), m, ...this.items.slice(idx)]
-                }
-                this.orphanedSignets.delete(os.uri)
-            } else {
-                this.orphanedMedias.set(media.signetURI, media)
-            }
+    }
+
+    addImageView = (media: xcvr.MediaView) => {
+        if (!media.imageView) {
+            console.log("called add imageview when i don't have an imageview")
+            return
+        }
+        if (this.existinguris.get(media.signetURI)) {
+            this.items = this.items.map((item: xcvr.Item) => {
+                return item.signetView?.uri === media.signetURI && isImage(item) ?
+                    { ...item, type: "image", mediaView: media } : item
+            })
+            this.existinguris.delete(media.signetURI)
+        } else {
+            console.error("recieved a mediaview who doesn't have a matching signet, rejecting: ", media)
         }
     }
 
···
 
 const b64encodebytearray = (u8: Uint8Array): string => {
     return btoa(String.fromCharCode(...u8))
-}
-
-const makeMessageFromSignetAndMessageViews = (m: MessageView, s: SignetView): Message => {
-    return {
-        type: 'message',
-        uri: m.uri,
-        body: "i didn't catch the lrc message body :c",
-        mbody: m.body,
-        id: s.lrcId,
-        active: false,
-        mine: false,
-        muted: false,
-        ...(m.color && { color: m.color }),
-        handle: m.author.handle,
-        profileView: m.author,
-        signetView: s,
-        ...(m.nick && { nick: m.nick }),
-        startedAt: Date.parse(s.startedAt)
-    }
-}
-
-const makeImageFromSignetAndImageMediaViews = (i: MediaView, s: SignetView): Image => {
-    return {
-        type: 'image',
-        uri: i.uri,
-        id: s.lrcId,
-        active: false,
-        mine: false,
-        muted: false,
-        malt: i.imageView?.alt,
-        ...(i.imageView?.src && { src: i.imageView.src }),
-        ...(i.imageView?.aspectRatio && { maspectRatio: i.imageView.aspectRatio }),
-        ...(i.nick && { nick: i.nick }),
-        ...(i.color && { color: i.color }),
-        handle: i.author.handle,
-        profileView: i.author,
-        signetView: s,
-        startedAt: Date.parse(s.startedAt),
-    }
 }
 
 const insertSIntoAStringAtIdx = (s: string, a: string, idx: number) => {
···
             const color = lex.color
             const signetURI = lex.signetURI
             const postedAt = lex.postedAt
-            ctx.verifyMessage({
+            ctx.addMessageView({
                 uri: uri,
                 author: author,
                 body: body,
···
                 ...(lex.author.color && { color: lex.author.color }),
                 ...(lex.author.avatar && { avatar: lex.author.avatar }),
             }
-            var imageView: ImageView | undefined
+            var imageView: xcvr.ImageView | undefined
             if (lex.imageView) {
                 console.log("has an image!")
                 imageView = {
···
             const color = lex.color
             const signetURI = lex.signetURI
             const postedAt = lex.postedAt
-            ctx.verifyImageMediaView({
+            ctx.addImageView({
                 uri: uri,
                 author: author,
                 ...(imageView && { imageView: imageView }),
···
         }
 
         case "init": {
-            console.log(event.msg.init)
             const id = event.msg.init.id ?? 0
             if (id === 0) return false
-            const echoed = event.msg.init.echoed ?? false
-            if (echoed) {
-                ctx.myID = id
-                ctx.myNonce = event.msg.init.nonce
-                // return false
-            }
+            const color = event.msg.init.color
             const nick = event.msg.init.nick
             const handle = event.msg.init.externalID
-            const color = event.msg.init.color
-            const body = ""
-            const active = true
-            const mine = echoed
-            const muted = false
-            const startedAt = Date.now()
-            const msg: Message = {
-                type: 'message',
-                body: body,
-                id: id,
-                active: active,
-                mine: mine,
-                muted: muted,
+            const nonce = event.msg.init.nonce
+            const mine = event.msg.init.echoed ?? false
+            const init: xcvr.LrcInit = {
                 ...(color && { color: color }),
+                ...(nick && { nick: nick }),
                 ...(handle && { handle: handle }),
-                ...(nick && { nick: nick }),
-                startedAt: startedAt
+                ...(nonce && { nonce: nonce }),
             }
-            ctx.pushItem(msg)
+            ctx.initMessage(id, init, mine)
             ctx.pushToLog(id, byteArray, "init")
             return true
         }
 
         case "mediainit": {
-            console.log("media init!!!!")
             const id = event.msg.mediainit.id ?? 0
             if (id === 0) return false
-            const echoed = event.msg.mediainit.echoed ?? false
-            if (echoed) {
-                ctx.myMediaID = id
-                ctx.myMediaNonce = event.msg.mediainit.nonce
-                // return false
-            }
+            const color = event.msg.mediainit.color
             const nick = event.msg.mediainit.nick
             const handle = event.msg.mediainit.externalID
-            const color = event.msg.mediainit.color
-            const active = true
-            const mine = echoed
-            const muted = false
-            const startedAt = Date.now()
-            const msg: Image = {
-                type: 'image',
-                id: id,
-                active: active,
-                mine: mine,
-                muted: muted,
+            const nonce = event.msg.mediainit.nonce
+            const mine = event.msg.mediainit.echoed ?? false
+            const init: xcvr.LrcInit = {
                 ...(color && { color: color }),
+                ...(nick && { nick: nick }),
                 ...(handle && { handle: handle }),
-                ...(nick && { nick: nick }),
-                startedAt: startedAt
+                ...(nonce && { nonce: nonce }),
             }
-            ctx.pushItem(msg)
+            ctx.initMedia(id, init, mine)
             ctx.pushToLog(id, byteArray, "init")
             return true
         }
···
         case "pub": {
             const id = event.msg.pub.id ?? 0
             if (id === 0) return false
-            ctx.pubItem(id)
+            ctx.pubMessage(id)
             ctx.pushToLog(id, byteArray, "pub")
             return false
         }
···
         case "mediapub": {
             const id = event.msg.mediapub.id ?? 0
             if (id === 0) return false
-            ctx.mediapubItem(id, event.msg.mediapub.alt, event.msg.mediapub.contentAddress)
+            const pub: xcvr.LrcMediaPub = {
+                alt: event.msg.mediapub.alt ?? "",
+                contentAddress: event.msg.mediapub.contentAddress
+            }
+            ctx.pubMedia(id, pub)
             ctx.pushToLog(id, byteArray, "pub")
             return false
         }
···
         case "mute": {
             const id = event.msg.mute.id ?? 0
             if (id === 0) return false
-            const muted = true
-            const active = true
-            const mine = false
-            const body = ""
-            const startedAt = Date.now()
-            const msg: Message = {
-                type: "message",
-                id: id,
-                body: body,
-                muted: muted,
-                active: active,
-                mine: mine,
-                startedAt: startedAt
-            }
-
-            ctx.pushItem(msg)
+            ctx.initMute(id)
             return false
         }