feat: web UI chat render, panels, presence + analytics

2026-05-31 19:41:01 +02:00
parent 75425d1bee
commit ed469ba8dd
83 changed files with 6034 additions and 136 deletions
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { ReactionCount } from "$lib/api/types";
+  import CustomEmoji from "$lib/components/CustomEmoji.svelte";
+
+  interface Props {
+    own: boolean;
+    reactions: ReactionCount[];
+  }
+
+  let { reactions, own }: Props = $props();
+</script>
+
+<div class="Reactions" class:own>
+  {#each reactions as reaction, index (reaction.custom_emoji_id ?? reaction.emoji ?? index)}
+    <span class="reaction" class:chosen={reaction.chosen}>
+      {#if reaction.custom_emoji_id}
+        <CustomEmoji id={reaction.custom_emoji_id} size={1.25} />
+      {:else}
+        <span class="emoji">{reaction.emoji ?? "❓"}</span>
+      {/if}
+      <span class="count">{reaction.count}</span>
+    </span>
+  {/each}
+</div>
+
+<style lang="scss">
+  .Reactions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    margin-top: 0.25rem;
+  }
+
+  .reaction {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.1875rem;
+
+    height: 1.625rem;
+    padding: 0 0.4375rem 0 0.375rem;
+    border-radius: 1rem;
+
+    font-size: 0.875rem;
+    font-weight: var(--font-weight-medium);
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text);
+
+    background-color: var(--color-message-reaction);
+
+    .own & {
+      background-color: var(--color-message-reaction-own);
+    }
+
+    &.chosen {
+      color: var(--color-white);
+      background-color: var(--color-primary);
+    }
+  }
+
+  .emoji {
+    font-size: 1rem;
+    line-height: 1;
+  }
+
+  .count {
+    line-height: 1;
+  }
+</style>