blob: 2a88a828d90513f9f3ab58e63450bd0979a7ff2c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<script>
import { logins, currentUser } from '$lib/store';
import Message from '$lib/components/Message.svelte';
let { sender, messages } = $props();
let name = $derived($logins.get(sender));
let ownMessage = $derived($currentUser !== null && $currentUser.id == sender);
</script>
<div
class="card my-4 px-4 py-1 relative"
class:own-message={ownMessage}
class:other-message={!ownMessage}
>
<span class="chip variant-soft sticky top-o left-0">
@{name}:
</span>
{#each messages as message}
<Message {...message} />
{/each}
</div>
<style>
.own-message {
background-color: rgb(32, 42, 74);
}
/* Honestly, I don't love scoping styles per component, and this is a great
* example of why. MessageRuns know if they're own-message, but Messages in
* them need to get a style based on that fact. I don't wanna bucket-brigade
* that fact into the Message, when it's a pure CSS concern.
*/
.own-message :global(*) {
color: rgb(198, 198, 198);
}
</style>
|
