feat: 1-to-1 message render + web data-lake backend

2026-05-31 01:45:05 +02:00
1 parent f0afb7ec5b
commit 75425d1bee
@@ -0,0 +1,110 @@
+<script lang="ts">
+  import type { ReplyView } from "$lib/api/types";
+  import { mediaKindLabel } from "$lib/format/media";
+  import { peerColorIndex, peerName } from "$lib/format/peer";
+  import { peers } from "$lib/stores/peers.svelte";
+
+  interface Props {
+    onjump?: (messageId: number) => void;
+    reply: ReplyView;
+  }
+
+  let { reply, onjump }: Props = $props();
+
+  const sender = $derived(
+    reply.sender_id === null ? undefined : peers.get(reply.sender_id)
+  );
+  const name = $derived(
+    sender
+      ? peerName(sender)
+      : (reply.sender_name ?? (reply.sender_id ? String(reply.sender_id) : ""))
+  );
+  const colorIndex = $derived(peerColorIndex(reply.sender_id ?? 0));
+  const preview = $derived(
+    reply.text || mediaKindLabel(reply.media_kind) || ""
+  );
+  const mediaOnly = $derived(!reply.text && reply.media_kind !== null);
+  const canJump = $derived(reply.message_id !== null && onjump !== undefined);
+
+  function jump() {
+    if (reply.message_id !== null) {
+      onjump?.(reply.message_id);
+    }
+  }
+</script>
+
+<button
+  type="button"
+  class="ReplyHeader peer-color-{colorIndex}"
+  class:clickable={canJump}
+  disabled={!canJump}
+  onclick={jump}
+>
+  <span class="bar"></span>
+  <span class="body">
+    <span class="title">{name || "Reply"}</span>
+    <span class="preview" class:media={mediaOnly}>{preview}</span>
+  </span>
+</button>
+
+<style lang="scss">
+  .ReplyHeader {
+    overflow: hidden;
+    display: flex;
+    align-items: stretch;
+
+    width: 100%;
+    margin-bottom: 0.1875rem;
+    padding: 0;
+    border: none;
+    border-radius: 0.25rem;
+
+    text-align: left;
+
+    background-color: var(--color-primary-tint);
+
+    &.clickable {
+      cursor: pointer;
+    }
+
+    &.clickable:hover {
+      background-color: var(--color-primary-opacity);
+    }
+  }
+
+  .bar {
+    flex-shrink: 0;
+    width: 0.1875rem;
+    background-color: currentColor;
+  }
+
+  .body {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding: 0.0625rem 0.375rem;
+  }
+
+  .title {
+    overflow: hidden;
+
+    font-size: 0.875rem;
+    font-weight: var(--font-weight-medium);
+    color: currentColor;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .preview {
+    overflow: hidden;
+
+    font-size: 0.875rem;
+    color: var(--color-text);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &.media {
+      color: var(--color-text-secondary);
+    }
+  }
+</style>